Having trouble with Vue Router view not functioning properly in my Laravel Blade page

While diving into the world of Vue.js, I encountered a perplexing issue. After successfully running ExampleComponent.vue in my admin panel and displaying its content, I attempted to import routes from an external file (new_route_list.js) and load them via AdminMaster.vue router-view. However, to my dismay, nothing appeared on the admin panel when I visited 'project-name/home'. The expected result was for AdminHome.vue content to be displayed.

Strangely, despite running npm run watch and checking the browser's Vue.js console for errors, no issues were reported.

If anyone could lend a hand in pinpointing the cause of this problem, it would be greatly appreciated.

In app.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import {v_routes} from './new_route_list.js';

Vue.component('admin-main', require('./components/admin/AdminMaster.vue'));

const router = new VueRouter({
  v_routes, 
   mode:'history'
})

const app = new Vue({
    el: '#app',
  router
});

AdminHome.vue

<template>
<div>
    <!-- Main content -->
    <section class="content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Title</h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                        <i class="fa fa-minus"></i></button>
                    <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                        <i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="card-body">
                Start creating your amazing application .....!
            </div>
            <div class="card-footer">
                Footer
            </div>
            <!-- /.card-footer-->
        </div>
    </section>
    <!-- /.content -->
</div>

AdminMaster.vue

<template>
<div id="adminmain">
    <router-view></router-view>
</div>

new_route_list.js

import AdminHome from './components/admin/AdminHome.vue'
export const v_routes = [
{
    path:'/home',
    component: AdminHome
}
]

In admin_master.blade.php, I have added:

<div class="wrapper" id="app">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-comments"></i>
          <span class="badge badge-danger navbar-badge">3</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Brad Diesel
                  <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">Call me whenever you can...</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  John Pierce
                  <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">I got your message bro</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="{{ asset('assets/admin/default/admin.png')}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Nora Silvester
                  <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">The subject goes here</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
        </div>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell"></i>
          <span class="badge badge-warning navbar-badge">15</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">15 Notifications</span>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-envelope mr-2"></i> 4 new messages
            <span class="float-right text-muted text-sm">3 mins</span>
          </a>
          <div class="dropdown-divider"></div>

          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
          <i class="fas fa-th-large"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="../../index3.html" class="brand-link">
      <img src="{{ asset('assets/admin/default/AdminLTELogo.png')}}"
           alt="AdminLTE Logo"
           class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">Admin Panel</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="{{ asset('assets/admin/default/admin.png')}}" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">{{Auth::user()->name}}</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>

          </li>

           <li class="nav-item">
            <a href="../widgets.html" class="nav-link">
              <i class="nav-icon fas fa-th"></i>
              <p>
                Posts
                <span class="right badge badge-danger">New</span>
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-copy"></i>
              <p>
                Layout Options
                <i class="fas fa-angle-left right"></i>
                <span class="badge badge-info right">6</span>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="../layout/top-nav.html" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Top Navigation</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="../layout/collapsed-sidebar.html" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Collapsed Sidebar</p>
                </a>
              </li>
            </ul>
          </li>


        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Admin Home Page</h1>
          </div>
          <div class="col-sm-6">

          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <admin-main></admin-main>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
javascriptlaravelvue.jsvue-componentvue-router

Answer №1

The issue that caused it not to work was due to the naming of the const in the new_route_list.js file. It should be named routes as it is a shorthand for 

new VueRouter({
    routes: [
        ///routes here
    ],
    mode:'history'
});

This can be seen in this example:

https://router.vuejs.org/guide/#javascript

I also noticed that the AdminMaster.vue file seemed redundant, so my suggestion would be to remove it and simply include the following in your admin_master.blade.php:

<!-- Main content -->
    <router-view></router-view>
<!-- /.content -->

Edit: Your files will need updating to reflect these changes

Here is app.js:

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'
import { routes } from './new_route_list.js'

Vue.use(VueRouter)

const router = new VueRouter({
    routes,
    mode:'history'
});

const app = new Vue({
    router
}).$mount("#app");

I modified the new Vue() with .$mount() and removed el:'#app' based on the example provided in the link above.

Here is the updated version of new_route_list.js:

import adminHome from './AdminHome.vue';

export const routes = [
    {
        path:'/',
        component: adminHome
    }
]

Don't forget to update AdminHome.vue too. Make sure to wrap the template within the closing </template> tag and use script tags to export the component like shown below:

<template>
<div>
    <!-- Main content -->
    <section class="content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Title</h3>

                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                        <i class="fa fa-minus"></i></button>
                    <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                        <i class="fa fa-times"></i></button>
                </div>
            </div>
            <div class="card-body">
                Start creating your amazing application .....!
            </div>
            <div class="card-footer">
                Footer
            </div>
            <!-- /.card-footer-->
        </div>
    </section>
    <!-- /.content -->
</div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying attributes of an object within a document using Mongoose

Encountering an issue where the sentiment object in my document is not updating. Within my Model Class, there's a field named sentiment of type Object structured like this: sentiment: { terrible: 0, bad: 0, okay: 0, good: 0, fantastic: 0 } ...

javascriptnode.jsexpressmongoose

Modifying numerous array keys/names in JavaScript

Alright, I have an array named arrayObj containing three objects: arrayObj[0], arrayObj[1], and arrayObj[2]. All of these objects have the key name["user"] repeated three times. To change these key names using a function, here's what I've come up ...

javascriptarraysobjectkeyunderscore.js

How about setting variables in Vue router as an alternative to controlling component visibility?

Utilizing URL parameters to set variables in my Vue application is a goal of mine. While I initially thought vue-router would be the perfect solution, it appears to be more catered towards handling the showing and hiding of components within a router-view ...

vue.jsvue-router

Even with the use of setTimeout, Angular 5 fails to recognize changes during a lengthy operation

Currently, I am facing an issue with displaying a ngx-bootstrap progress bar while my application is loading data from a csv file. The Challenge: The user interface becomes unresponsive until the entire operation is completed To address this problem, I a ...

javascriptangulartypescriptsettimeoutangular-changedetection

What does ngModel look like without the use of square brackets and parenthesis?

Can you explain the usage of ngModel without brackets and parentheses in Angular? <input name="name" ngModel> I am familiar with [ngModel] for one-way binding and [(ngModel)] for two-way binding, but I am unsure what it means when ngModel ...

javascriptangulartypescript

Deactivate the Mention and Hash tag in ngx-linkifyjs

I am currently utilizing ngx-linkifyjs to automatically convert URLs in text to clickable hyperlinks. However, I am facing an issue where it is also converting # and @ tags into links. Is there a way to prevent the conversion of # and @ while maintain ...

javascriptangulartypescript

Encountering a 404 error with Next.js 13 dynamic routing

Whenever I click on an item, it redirects to the dynamic route "http://localhost:3000/products/{id}" but instead of displaying the data, I get an error. Here is my file structure: app components Product.js pages Products [id].js layou ...

javascriptnext.jsroutesnext.js13nextjs-dynamic-routing

Nuxt.js encounters difficulties in fetching information from the Django Rest Framework API

I am currently developing a Nuxt.js/Vue frontend for my Django Rest Framework backend. Despite specifying permissions to allow non-authenticated users to read-only, I am having trouble successfully loading data from my API. Index.vue import axios from &a ...

vue.jsdjango-rest-frameworknuxt.js

Problems with the firing of the 'deviceready' event listener in the PhoneGap application

Utilizing vs2012, I have been working on a PhoneGap application. Within this application, the following JavaScript code is being used: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // alert("hh") ...

javascriptjquerycordova

Angular.js page failing to reflect changes following Firebase request completion

myApp.controller('RegistrationController', ['$scope', function($scope) { var auth = firebase.database().ref(); // console.log("auth::"+auth); $scope.login = function() { $scope.message = "Welcome " + $scope.user.ema ...

javascriptangularjsfirebasefirebase-authentication

Placing an exit button beside an image for easy navigation

Here is a snippet of my code: <style type="text/css"> .containerdiv { position:relative;width:100%;display:inline-block;} .image1 { position: absolute; top: 20px; left: 10px; } </style> <div class="containerdiv"> <ima ...

javascripthtmlcss

Determining validity of a form field in vue.js

I've been working on a Vue application and I'm currently dealing with identifying the invalid state of a form field. Simply put, I want to be able to determine if a field is in an invalid state, such as when it's required but left empty upon ...

formsvalidationvue.jsvuejs2vuetify.js

I must create text that is transparent against a colorful gradient background

Hey there! I'm seeking help in figuring out how the text on this site is designed. You can take a look at it here. Essentially, what I'm aiming for is to have the text color match the gradient of the background color from the previous div, while ...

javascripthtmlcss

Is it possible to retrieve a JSON property using a string?

Here is the JSON I am working with: json_filter = {"CO": "blah"} I am attempting to access the member 'CO' using a string value, but the result keeps coming back as undefined. var selectedState = $(this).val(); // The state selected is 'C ...

javascriptjqueryjson

dynamically import a variety of components in vue.js and nuxt depending on certain conditions

Is there a way to implement dynamic imports for all 3 components in this scenario? Each component has different props, so using the switch option in the computed method is not feasible. I have come across solutions for using a single component dynamically ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Securing Confidential Information in Vue Data Storage

For the last month, I've dedicated my time to learning Vue. However, there's still one question that puzzles me: The web application I'm currently developing allows users to maintain daily diaries for different projects. They should be able ...

node.jsexpressvue.jssecurity

avoiding delays in asynchronous functions with vue3 and sweetalert

I am currently incorporating SweetAlert2 with Vue3 using the composition API. In my code snippet below, I have encountered an issue where the alert does not wait for its button to be clicked: onBeforeMount(async() => { Swal.fire('test message&apo ...

vue.jsvuejs3sweetalert2

Simulating a traditional table scroll function on a window using virtualization

I am currently attempting to incorporate a virtualized table in react using react–virtualized, but I am facing issues with the rendering of the table. I am seeking to understand the root cause for this problem as well as find solutions for other overlapp ...

javascriptnode.jsreactjsreact-table

Error Encountered with Custom Ajax File Uploader's .AjaxSubmit() Function

I am working on a multipart form that allows users to upload images using AJAX. Here is the HTML code: <form name="mainform" id="mainform" class="form_step" action="" method="POST" enctype="multipart/form-data"> <!-- This image acts li ...

javascriptphpjqueryajaxfile-upload

Working with the collapse event in Bootstrap

After purchasing a template from ThemeForest, I found it to be absolutely amazing. However, I am struggling with using Bootstrap as it seems quite complex. The left menu is structured with collapsible ul and multiple li elements. I am seeking assistance o ...

javascriptjqueryhtmlcss