Vue and vue router using CDN

Question

I am trying to route using vue cdn and vue router cdn. It is supposed to display Dashboard in first. And when I press Add Employee then its shows Unexpected token < at first line.

index.html

    <router-link to="/">Home</router-link>
    <router-link to="/employee">Add Employee</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-link to="/client">Add Client</router-link>

index.js

   Vue.component('addEmp',{
   template:require('./components/addEmp.html')
   })

var client = {template:"<h1>Client</h1>"};
var addEmp = {template:"<addEmp></addEmp>"};
var contacts = {template:"<h1>Contacts</h1>"};
var dashboard = {template:"<h1>Dashboard</h1>"};

var routes = [
    {path:'/', component: dashboard},
    {path:'/employee',component:addEmp}
];

var router = new VueRouter({
    routes:routes
});

var routerR = new Vue({
        router,
        el:'#app',
        components:{
            addEmp
        },
        data:{

        },
        methods:{

        }
    }).$mount("#app")

addEmp.vue

    <div id="addEmp">
    <h1>saijal</h1>
    </div>

    <script>

     module.export=`<h1>Hi</h1>`;

    </script>

Might be because your exporting a string as a Vue component in addEmp.vue — officert
– officert, Commented May 13, 2018 at 15:26

Simon Hyll · Accepted Answer · 2018-11-14 05:44:52Z

2

You can't use .vue files using the CDN version of Vue and Vue Router because the .vue filetype is part of the vue-loader project for Webpack.

In other words, you need to transition over to using Webpack if you wanna use .vue files.

For CDN you need to use your template as a string:

var mytemplate = `<div>
<h1>This is my template</h1>
</div>`

Vue.component('mycomp1', {
    template: mytemplate
});

Vue.component('mycomp2', {
    template: `
        <div>
            Hello, {{ name }}!
        </div>
    `,
    props: ['name'],
});

answered Nov 14, 2018 at 5:44

Simon Hyll

3,6563 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charles G · Accepted Answer · 2019-04-05 18:34:36Z

Because we are not using Node, Babel and Webpack:

Use .js files instead of .vue for your components

Use template: instead of <template>...</template> to render your component.

No need to declare component in your vue

index.html (or index.php)

<script src="js/vue.js"></script>
<script src="js/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script type='module'>
    import dashboard from './js/components/Dashboard.js';
    const router = new VueRouter({
        mode: 'history',
        routes: [
            { path: '/dashboard', component: dashboard }
          ]
     })


     new Vue({ 
        router,
        el: '#app',
        components:{},
        methods:{
           myMethod:function() {
...

<router-link to="/dashboard">/dashboard</router-link>
...      
<router-view></router-view>

js/components/dashboard.js

export default {
    data: () => ({
    }),
    template:`<span>My Dashboard</span>`
}

Collectives™ on Stack Overflow

Vue and vue router using CDN

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related