Striving to broaden my knowledge of Vue, I set out to create a page with tabs inspired by one of the Vue examples available at . However, an obvious error seems to be eluding me, as I encounter a syntax issue on the line
import * as Tabs from 'vue-slim-tabs';
when viewing it in Chrome.
tabs01.html:27 Uncaught SyntaxError: Unexpected token *
I am only accessing it as a local file file:///C:/Users/USERX/Documents/git-projects/vue/tabs/tabs01.html, as my goal is to grasp the fundamental concepts. It seems that something very apparent is escaping me here because neither the import line nor the script tag import seems to work.
tabs01.html:
<html>
<head>
<title>Tabbing test 01</title>
</head>
<body>
<div id="app">
<template>
<tabs>
<tab title="Vue">
This is Vue
</tab>
<tab title="React">
This is React
</tab>
<tab title="Svelte">
This is Svelte
</tab>
</tabs>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30464757d240476242234950512f2b212b">[email protected]</a>/dist/vue-slim-tabs.js"></script>
<script>
import * as Tabs from 'vue-slim-tabs';
Vue.use(Tabs);
const app = new Vue({
el: '#app',
data() {
return {}
},
});
</script>
</body>
</html>