When working with Vue 3 SFC and trying to embed the template inside a Laravel Blade file, it can be a bit tricky. Take for example this usage scenario:
Test.vue
<script setup>
import { ref} from 'vue';
const testValue = ref('Works');
</script>
app.blade.php
<head>
@stack('js')
</head>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
test.blade.php
@extends('layouts.app')
@push('js')
@vite(['resources/js/test.js'])
@endpush
@section('content')
<span>@{{ testValue }}</span>
@endsection
test.js
import { createApp } from 'vue';
import Test from "./components/Test.vue";
const app = createApp(Test).mount("#app");
Despite the complexity, using blade files seems to work well after running npm run dev:
https://i.stack.imgur.com/fK09m.png
However, once npm run build is executed, only a blank page appears without the blade file template being rendered:
https://i.stack.imgur.com/jD4qD.png
If you have any insights on why this might happen and how to resolve it, here's a glimpse at my configuration:
vite.js.config
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
server: {
hmr: true,
https: false,
host: 'localhost',
proxy: {
// Proxying websockets or socket.io
'/app': {
target: 'wss://localhost:6001',
ws: true
}
}
},
plugins: [
laravel(
{
input: [
'resources/js/test.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js',
},
},
build: {
chunkSizeWarningLimit: 1000,
},
define: {
__VUE_PROD_DEVTOOLS__: true,
__VUE_OPTIONS_API__: true,
}
});