CODEWITHSUNDEEP
javascripthtmlvue.jsvue-router
Miura-shi
Miura-shi

Reputation: 4519

VueJS routes with component tag not working

Whenever I use the component tag which has an id of #app within the template inside my components/App.vue it returns the following errors:

// components/App.vue
<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello></hello>
    <a v-link="{ path: '/home' }">Go to Foo</a>
    <a v-link="{ path: '/about' }">Go to Bar</a>
    <p>
      Welcome to your Vue.js app!
    </p>
    <router-view></router-view>
  </div>
</template>

Errors

[vue-router] <router-view> can only be used inside a router-enabled app.

[vue-router] v-link can only be used inside a router-enabled app.

However, if do it like this without the component and just a regular element with the component id it works normally.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VueJS Starter</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Is there anyway to use router with web components? Because having to use it with an element id also does not work with vue-devtools in Chrome.

Upvotes: 0

Views: 1396

Answers (1)

Juan Garassino
Juan Garassino

Reputation: 61

Make sure to provide the information at your main.js file.

There you should properly import and use the router, like this:

import VueRouter from 'vue-router';
...
Vue.use(VueRouter);

Upvotes: 1

Related Questions