Laravel Vite Multiple Entry Points and Preserve Folder Structure

Question

I have this Laravel 10 and Vue 2.7 project and I converted it from Mix to Laravel Vite. Here is my current folder structures:

/resources
----/js
--------/container
------------/student
----------------app.js
----------------cancel.js
------------/teacher
----------------app.js
----------------apply.js
--------/components
------------/student
----------------app.vue
----------------cancel.vue
------------/teacher
----------------app.vue
----------------apply.vue
----/view
--------/student
------------app.blade.php
------------cancel.blade.php
--------/teacher
------------app.blade.php
------------apply.blade.php

How do I write my vite.config.js? I have tried this

export default defineConfig({
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        }),
        laravel({
            input: [
                ...glob.sync('resources/js/container/**/*.js')
            ],
            refresh: true
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm.js',
        }
    }
})

But the generated files after npm run build are located in just one folder public/build/assets/.

Answer 1

Your Laravel Vite project's folder structure appears to be set up differently than the Laravel Vite installation by default. To organise your assets and views, Laravel Vite use a particular folder structure by default. The vite.config.js file can be changed to alter the output folder structure, though.

You want to output your assets in your situation to a separate location. By including the build option in your vite.config.js file, you can do this. Here is how to edit your vite.config.js file:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'vite-plugin-laravel';

export default defineConfig({
  plugins: [
    vue(),
    laravel({
      input: [
        // Update the paths to match your folder structure
        'resources/js/container/**/*.js',
        'resources/js/components/**/*.vue',
      ],
      views: [
        // Update the paths to match your folder structure
        'resources/views/**/*.blade.php',
      ],
    }),
  ],
  build: {
    // Set the output folder for your assets
    outDir: 'public/build', // This is where your assets will be output
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm.js',
    },
  },
});

To reflect your actual folder structure, make sure to adjust the locations in the laravel.input and laravel.views arrays.

After making these modifications, npm run build will output your assets to the public/build folder according to the outDir option you chose.