Failed to resolve directive: link & Unknown custom element: <router-view>

Hi,

Don't understand what's happening. I keep getting those errors and the link won't display / work no matter what I do. I followed both the example from the documentation & tried a few other tutorials too. Always the same problem.

My HTML:

<body>
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- use v-link directive for navigation. -->
        <a v-link="{ path: '/hello' }">Go to Foo</a>
      </p>
      <!-- route outlet -->
      <router-view></router-view>
    </div>

    <script src="./js/main-vue.js"></script>
</body>

My main-vue.js:

var Vue = require('vue')
var VueRouter = require('vue-router')

Vue.use(VueRouter)
Vue.config.debug = true;

// Set up our route


var router = new VueRouter();

router.map({
    '/hello': {
        component: {
            template: '<p>hello!</p>'
        }
    }
});



var App = Vue.extend({});

router.start(App, '#app');

See the full error log:

main-vue.js:3583[Vue warn]: Failed to resolve directive: link
main-vue.js:3589Error: Warning Stack Trace
    at warn (main-vue.js:3589)
    at assertAsset (main-vue.js:4513)
    at compileDirectives (main-vue.js:9635)
    at compileElement (main-vue.js:9257)
    at compileNode (main-vue.js:9214)
    at compileNodeList (main-vue.js:9396)
    at compileNodeList (main-vue.js:9397)
    at compileNodeList (main-vue.js:9397)
    at compile (main-vue.js:9001)
    at VueComponent.Vue._compile (main-vue.js:10642)
main-vue.js:3583[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly?
main-vue.js:3589Error: Warning Stack Trace
    at warn (main-vue.js:3589)
    at checkComponentAttr (main-vue.js:4080)
    at checkComponent (main-vue.js:9461)
    at compileElement (main-vue.js:9253)
    at compileNode (main-vue.js:9214)
    at compileNodeList (main-vue.js:9396)
    at compileNodeList (main-vue.js:9397)
    at compile (main-vue.js:9001)
    at VueComponent.Vue._compile (main-vue.js:10642)
    at VueComponent.Vue.$mount (main-vue.js:11634)
backend.js:201 [vue-devtools] ready.

The only positive thing is that #! is added in the URL meaning something happens? Node 5.4.1 & npm 3.5.3 & browserify & Laravel Elixir

Thanks for your help! Sorry going crazy on this one, duplicating from another site, but maybe you had the same pb...

commandantp

10 years ago

Level 2

Make sure you don't already load vue somewhere else if you see that message....

1 like

oscaralexander

9 years ago

Level 1

Hi commandantp! Dusting off this topic because I'm getting the exact same error and I'm dying to find out how you solved it. I'm only loading the Vue lib from CDN once, and only importing it once throughout my JS files...

Thanks!

FIXED: While I was only loading them from CDN once, they were (of course) also included in the bundle via Gulp and thus loaded twice. So, your solution was correct and I'm an idiot :-)

1 like

felloz

3 years ago

Level 1

So webpack dont recognize PascalCase?

Please or to participate in this conversation.