Кусок vue в шаблоне blade
1. composer create-project laravel/laravel . 10
2. vite.config.js должен быть таким.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js','resources/js/SomePieceOfCode/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
В поле "input" должны быть все ресурсы всех кусков кода vue.js
3. В routes/web.php
Route::get('/test-vue', function () {
return view('test-vue');
});
4. npm install
5. npm i @vitejs/plugin-vue@4
6. resources/views/test-vue.blade.php
<div id="some_element"></div>
@vite('resources/js/SomePieceOfCode/app.js')
7. resources/js/SomePieceOfCode/app.js
import App from './App.vue'
import { createApp } from 'vue'
const app = createApp(App)
app.mount('#some_element')
8. resources/js/SomePieceOfCode/App.vue
<template>
<h1>Some piece of code</h1>
</template>
9. npm run dev
10. на сервере
npm run build
11. Как передавать параметры во vue расписано здесь https://laravel.demiart.ru/four-ways-to-pass-data-from-laravel-to-vue/
<template>
<div v-if="showSecretWindow">
<h1>Это секретное окно, никому не говори!</h1>
</div>
</template>
<script>
export default {
computed: {
showSecretWindow() {
return window.showSecretWindow;
}
}
}