Laravel VueJS - Cannot find element: #navigation

Question

I am new to Laravel & VueJs.

My current issue are these 3 things:

[Vue warn]: Cannot find element: #navigation
[Vue warn]: Template element not found or is empty: #navigation
vue.js:437 [Vue warn]: Failed to mount component: template or render function not defined.

Here is my navigation.vue file

<template id="navigation">
  <div class="c-header col-xs-12 col-sm-12 colmd-12 col-lg-12">
    <div class="u-tab-menu">
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/home">home</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/about">about</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/products">products</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/services">services</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/contact">contact</router-link>
      <router-link class="u-tab-menu__tab pull-left col-xs-2 col-sm-2 col-md-2 col-lg-2" :to="/qa">qa</router-link>
    </div>
  </div>
  </div>
</template>

<script type="text/javascript">
  export default {}
</script>

Here is my routes.js file

// import components into routes.js here
import home from './components/home.vue'
import about from './components/about.vue'
import products from './components/products.vue'
import services from './components/services.vue'
import contact from './components/contact.vue'
import qa from './components/qa.vue'

var router = new VueRouter();

router.map({
  path: "/home",
  component: "home"
}, {
  path: "/about",
  component: "about"
}, {
  path: "/products",
  component: "products"
}, {
  path: "/services",
  component: "services"
}, {
  path: "/contact",
  component: "contact"
}, {
  path: "/qa",
  component: "qa"
});

export default router

Here is my main.js file

import Vue from 'vue'
import VueRouter from 'vue-router'

import {
  routes
} from './routes.js'
import navigation from './components/navigation.vue'

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

Vue.use(vueRouter);
router.start(navigation, '#app');

require('./bootstrap');

window.Vue = require('vue');

Here is my .blade.php file

<!doctype html>
<html lang="{{ config('app.locale') }}">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Laravel Test Application</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
  <script type="text/javascript" src="https://unpkg.com/vue-router@2.6.0/dist/vue-router.js"></script>
  <!--<script type="text/javascript" src="resources/assets/js/main.js"></script>-->
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
  <!-- Styles -->
  <link href="{{ elixir('css/app.css') }}" rel="stylesheet" type="text/css">
  <link href="{{ elixir('css/main_style.css') }}" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="container">
    <div class="row">
      <div id="app">
        <!-- Root Vue Instance -->

        <navigation></navigation>
        @{{ testData }}
      </div>
    </div>

    <router-view></router-view>

  </div>

  <script type="text/javascript">

    Vue.component('navigation', {
      template: '#navigation'
    });

    const app = new Vue({

      el: '#app',
      data: {
        testData: "Some text here"
      },
      methods: {

      },
      router: this.router
    }).$mount('#app')

  </script>

</body>

</html>

I don't know where to start to figure this out and why it is doing this. I have basically put all the parts together to make it work but I don't see where the error is. Please help. Thanks in advance.

col-xs-2 col-sm-2 col-md-2 col-lg-2 can be simplified to col-2. There's no class named col-xs-2. Bootstrap is mobile first. — emix

Arnaud Bettembot Arnaud Bettembot · Accepted Answer · 2019-09-20T09:10:31

I had the same error. I resolved it by surrounding the Vue declaration with

$(document).ready(function() { .... };

Laravel VueJS - Cannot find element: #navigation

1 Answers