I am building a laravel package that exposes a user interface (kinda like telescope and horizon do).
I am trying to use vite but bundling and publishing the assets is proving to be quite a challenge.
My package is setup under a packages/rascan/hela folder inside a default laravel application.
I have published assets and loaded views from within my package’s service provider
$this->loadViewsFrom(__DIR__.'/../resources/views', 'rascan');
$this->publishes([
__DIR__.'/../public' => public_path('vendor/hela'),
], 'hela');
I am then using the @vite
directive to include the necessary files in my blade file (inside the package)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
@vite('resources/js/app.js', 'vendor/hela/build')
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
</html>
I have a vue component (ExampleComponent.vue) that I am trying to access from the blade file but nothing happens when I visit the browser. I just end up with a blank page – visiting it from the top level laravel app.
This is my app.js
import { createApp } from 'vue'
import ExampleComponent from './components/ExampleComponent.vue'
alert("ddsfsdfs")
createApp({
components: {
ExampleComponent,
}
}).mount('#app')
This is my package’s vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js'
]),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
})
],
})
I would love to watch for changes that I make from inside my package or just build them and access them from the parent laravel application. I tried to find examples even from laravel’s ecosystem but seems they (horizon, telescope etc) are still using laravel mix.