did not display Vue file contents on Laravel Project


working with Laravel + Vue Project. I have following file structures.
welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <div id="app">
        <mainapp></mainapp>
    </div>
</body>
<script src="{{mix('/js/app.js')}}"></script>
</html>

mainapp.vue

<template>
    <div>
       
        <router-vue></router-vue>
    </div>
</template>

app.js

require('./bootstrap');
window.Vue = require('vue')
import router from './router'

Vue.component('mainapp', require('./components/mainapp.vue').default)
const app = new Vue({
    el: '#app',
    router,
})

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import firstPage from './components/pages/myFirstVuePage.vue'
import newRoutePage from './components/pages/newRoutePage.vue'
import hooks from './components/pages/basic/hooks.vue'
import methods from './components/pages/basic/methods.vue'
import { method } from 'lodash'

const routes = [
    {
        path: '/my-new-vue-route',
        component: firstPage
    },

    {
        path: '/new-route',
        component: newRoutePage
    },
    {
        path: '/hooks',
        component: hooks
    },
    {
        path: '/methods',
        component: methods
    },
]

export default new Router({
    mode: 'history',
    routes
})

web.php

Route::any('{slug}', function(){
    return view('welcome');
});

and methods.vue

<template>
<h1>this is template page</h1>
</template>

but when run project it is not displaying methods.vue content on the page. not any error only empty page here. how could I fix this problem?

Source: Vue – Stack Overflow

November 20, 2021
Category : News
Tags: javascript | laravel | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.