如何在 Laravel 9 刀片中渲染 Vue 3 路由器视图？

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.我是 Vue.js 的新手，所以我看了很多关于如何在 Laravel Blade 中渲染 Vue.js 组件的教程和论坛，但我没有找到任何解决方案。

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...在我当前的 app.js 中，我在 App.vue 中渲染路由器视图但是当我想尝试将路由器视图放入 Welcome.blade.php 时，什么都没有显示......

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这是我的 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.已经阅读了关于 stackoverflow 的所有帖子并没有帮助，Vue 或 Laravel 文档也没有很好的解释。

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 :所以 VueJS 3 作为框架和 Laravel Webpack 组合中使用的 VueJs 3 是两个不同的地方：

Router is available in VueJS framework路由器在 VueJS 框架中可用
VusJS in Laravel webpack offers you the ability to add custom components like : Laravel webpack 中的 VusJS 为您提供了添加自定义组件的能力，例如：

in app.js :在app.js中：

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

and use it in blade <example-component></example-component>并在刀片<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.你可以为你的后端 API 创建一个 VueJS 前端的 Web 应用和一个 Laravel 项目，这样你就可以从每个工具的强大功能中受益。

如何在 Laravel 9 刀片中渲染 Vue 3 路由器视图？

问题描述

1 个解决方案

解决方案1
1 2022-07-20 15:20:40

如何在 Laravel 9 刀片中渲染 Vue 3 路由器视图？

问题描述

1 个解决方案

解决方案1 1 2022-07-20 15:20:40

解决方案1
1 2022-07-20 15:20:40