Using Vite to bundle assets in a laravel package – Blancer.com Tutorials and projects

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.