How to render Vue 3 router-view in Laravel 9 blade?

Question

Im new in Vue.js, so i watched a tones of tutorials and forums for how to render Vue.js component inside Laravel blade and i didnt find any solutions for that.

In my current app.js i render router-view inside App.vue But when i want try to put router-view inside welcome.blade.php nothing shows...

import './bootstrap';
import {createApp} from 'vue';

import App from './App.vue';
import axios from 'axios';
import router from './router';

const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount('#app');

and this is my App.vue

<template>
    <div class="container">
        <NavMenu/>
        <router-view></router-view>
    </div>
</template>

So what i want is

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>{{ env('APP_NAME') }}</title>
</head>

<body>
    <div id="app">
        <router-link :to="{ name: 'home' }">
        <router-link :to="{ name: 'about' }">
      
        <router-view></router-view>
    </div>
    @vite('/resources/js/app.js')

</body>
</html>

Already read all posts here on stackoverflow and didnt helps, also Vue or Laravel documentation doesnt have nice explanation.

I would be very grateful if you could help me in further research and my studies.

Answer 1

So VueJS 3 as framework and VueJs 3 used in Laravel Webpack mix are two things differents :

Router is available in VueJS framework
VusJS in Laravel webpack offers you the ability to add custom components like :

in app.js :

const app = createApp({})
app.component('example-component', require('./components/ExampleComponent.vue').default);

and use it in blade <example-component></example-component>

You can create a VueJS fronted Web App and a Laravel project for your backend API so you can benefit from the power of each tool.

How to render Vue 3 router-view in Laravel 9 blade?

Question

1 answers

solution1
1 2022-07-20 15:20:40

How to render Vue 3 router-view in Laravel 9 blade?

Question

1 answers

solution1 1 2022-07-20 15:20:40

solution1
1 2022-07-20 15:20:40