Use Vite instead of Laravel-Mix

[sajaddp]

Hi,
Yesterday, Laravel replaced Laravel-Mix with Vite. v9.2.0
Do you have a plan to change the requirements?

Newer versions of Laravel now use Vite by default which makes it difficult to use Nova in new projects.

@crynobone

[crynobone]

We can only change our build system on a new major release. If it is as you say incompatible with Mix then changing to Vite will cause breaking change for all 3rd party Nova packages

[crezra]

Hi !
Would it be possible to provide a vite setup optionally ? Perhaps, as a trialing phase in mind, have custom components (fields, tools, etc) provide a flag to create them with vite instead of mix

[carestad]

Anyone gotten Vite working with Nova 4? I see from the releases page for v4.7.0 that it got "improved compatibility with Vite", so I assume there is some way of making it work. Unfortunately there is not much documentation to be found on it yet.

[crynobone]

Vite and Mix are two separate approaches, while Mix 1 to Mix 6 still uses Webpack. Also, Vue 2 was a simple architecture. For Nova 4 we spend almost 2 months figuring out how to build the structure for Nova and Nova components to work together.

[flexchar]

@crynobone that's quite a tough nut to crack it sounds. As a curious mind, I would totally love to hear about your journey - the challenges and the solutions you stumbled on the way. If you were to write a blog, say, like Laravel Engineering Team and share insights like that within the relevant framework context and stacks - I bet many would be interested in reading.

And that being said, if you were kind enough to share this journey somewhere, I'd really love to read up. :)

[carestad]

Alright, so I revisited this today and I found two guides that were especially helpful in terms of using Vite for Nova components.

1. https://rezrazi.fr/setting-up-laravel-nova-with-vite-and-typescript
2. https://github.com/oneduo/laravel-nova-vite-typescript-skeleton

Both of these use typescript though, plus tailwind and postcss, but making it work for nova tools and fields with plain JS wasn't really hard:

1. cd nova-components/MyCustomField
2. rm nova.mix.js webpack.mix.js
3. touch vite.config.js
4. npm i -D vite @vitejs/plugin-vue @inertiajs/inertia @inertiajs/inertia-vue3
5. Add the following to vite.config.js:

import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],

  define: {
    "process.env": process.env, // Vite ditched process.env, so we need to pass it in
  },

  build: {
    outDir: resolve(__dirname, "dist"),
    emptyOutDir: true,
    target: "ES2022",
    minify: true,
    manifest: true,
    lib: {
      entry: resolve(__dirname, "resources/js/field.js"),
      name: "field",
      formats: ["umd"],
      fileName: () => "js/field.js",
    },
    rollupOptions: {
      input: resolve(__dirname, "resources/js/field.js"),
      external: ["vue", "Nova", "LaravelNova"],
      output: {
        globals: {
          vue: "Vue",
          nova: "Nova",
          "laravel-nova": "LaravelNova",
        },
        assetFileNames: "css/field.css",
      },
    },
  },

  optimizeDeps: {
    include: ["vue", "@inertiajs/inertia", "@inertiajs/inertia-vue3", "axios"],
  },
});

6. Modify package.json. Pretty much remove everything default in scripts and just add these two instead:

"dev": "vite build --watch",
"build": "vite build"

7. Test by running npm run build

This worked for all my custom components (1 field and 3 tools) without a problem. Just note that the vite.config.js must be adapted for fields and tools (and other types as well I assume) in terms of the input and output filenames (field.js vs. tool.js etc.).

[benpdavison]

@carestad amazing thank you, for a default generated field i needed to modify the imports in resources/js/field.js to include the .vue file suffix. Additionally I needed to add the laravel-nova package as a dependency.

[nastoychev]

For me works also. I think it will be cool if we have the option to decide on our own.
It will make the migration to the major version later on smoother, from my opinion.

As example:

php artisan nova:field <some/thing> --vite