Question:

How can I change the router view in Laravel by VueJS?

Problem

I am learning Vuejs (v3.2.36) in the Laravel framework (v10.22). I want to change the codes in the Vuejs file. The problem is that the project does not work. Vuejs files are as follows.

/resources/js/app.js

import './bootstrap';

import Router from '@/router'

import store from '@/store'

import { createApp } from 'vue/dist/vue.esm-bundler';

const app = createApp({})

app.use(Router)

app.use(store)

app.component("my-component", Router)

app.mount('#app')

/resources/js/router/index.js

import { createWebHistory, createRouter } from 'vue-router'

import store from '@/store'

const routes = [

{

path: "/",

component: () => import('@/components/Home.vue'),

meta: {

title: `..Home..`,

middleware: "guest",

requiresAuth: false,

}

{

...

{

path: "/dashboard",

component: () => import('@/layouts/Default.vue'),

meta: {

middleware: "auth",

requiresAuth: true,

children: [

{

path: "/dashboard",

component: () => import('@/components/Dashboard.vue'),

...

}

]

}

]

const router = createRouter({

history: createWebHistory(),

routes,

})

router.beforeEach((to, from, next) => {

document.title = to.meta.title

if (to.meta.middleware == "guest") {

if (store.state.auth.authenticated) {

if (to.meta.pageLogin) {

next({name: "dashboard"})

}

next()

} else {

if (store.state.auth.authenticated) {

next()

return;

}

next({ name: "login" })

}

})

export default router

/resources/js/layouts/Default.vue

<div>

<nav>

LoGo

</nav>

<main>

<router-view></router-view>

</main>

</div>

</template>

import {mapActions} from 'vuex';

export default {

name:"default-layout",

components: {

data(){

return {

}

methods:{

...mapActions({

signOut:"auth/logout"

}),

async logout(){

await axios.post('/logout').then(({data})=>{

this.signOut()

this.$router.push({name:"login"})

})

}

</script>

/resources/js/components/Home.vue

<div>

This is Home page.

</div>

</template>

import { mapActions } from 'vuex'

export default {

name:"home",

data(){

return {

}

methods:{

}

</script>

/resources/js/components/Dashboard.vue

<div>

This is Dashboard page.

</div>

</template>

export default {

name:"dashboard",

data(){

return {

}

mounted() {

axios.get('api/user/1').then( (res) => {

this.user = res.data

})

}

</script>

The app.blade.php file is as follows (Laravel).
/resources/views/layouts/app.blade.php

<!DOCTYPE html>

...

<body>

<my-component></my-component>

</div>

</body>

</html>

Error:

[Vue warn]: Component is missing template or render function.

at <MyComponent>

at <App> runtime-core.esm-bundler.js:38:16

The error says the name MyComponent is not defined.

Solution

app.js

...

import { createApp,h } from 'vue'

const app = createApp({

render: ()=>h(App)

});

...

app.blade.php

...

<body>

</body>

...

>Why logged user object is all strings in Vuejs and Laravel 10?

>What is meant by progressive framework?

>How can I replace this.$parent in composition API in Vuejs?

>How do I fix an invalid route component in the new VueJs Project?

>How to get all the rows selected in Vuejs?

>How to set up a dynamic grid based on flex or grid in Vuejs?

>Create a project using Vue.js: Beginners Guide

>Authentication with Vue 3 and Firebase

>Plugins and Presets for Vuejs project

>Create a Vue.js application with CLI Services

>Create a project using Vue.js: Beginners Guide

>Create Vue.js application API

vuejs

Nisha Patel

Your Answer

Submit

Nisha Patel

0 Answers

Top Questions

Nisha Patel

0 Answers

Top Questions

Related Questions