lucky_cli icon indicating copy to clipboard operation
lucky_cli copied to clipboard

Default generated apps to using Vite instead of Mix

Open jwoertink opened this issue 6 months ago • 1 comments

Related: https://github.com/luckyframework/lucky/issues/1980

Vite is much faster than Mix, and with Bun about to be default instead of yarn, we might as well do the swap here too.

One thing to consider is that we need to maintain backwards compatibility so when someone using mix updates Lucky, their app doesn't just bork all over.

jwoertink avatar Jun 26 '25 15:06 jwoertink

An important thing to remember is to place all Vite-related tags right before the </head> tag. Vite's HMR will clean up everything between its main entry point and the end of the head. So this works:

    head do
      utf8_charset
      title "My App - #{@page_title}"
      csrf_meta_tags
      responsive_meta_tag

      # Development helper used with the `lucky watch` command.
      # Reloads the browser when files are updated.
      live_reload_connect_tag if LuckyEnv.development?

      vite_client_tag
      vite_js_link "main.js", defer: true
      vite_css_links "main.js"
    end

But this will not:

    head do
      utf8_charset
      title "My App - #{@page_title}"
      vite_client_tag
      vite_js_link "main.js", defer: true
      vite_css_links "main.js"
      csrf_meta_tags
      responsive_meta_tag

      # Development helper used with the `lucky watch` command.
      # Reloads the browser when files are updated.
      live_reload_connect_tag if LuckyEnv.development?
    end

Here Vite's HMR will remove the csrf, responsive, and the live reload tags, including anything else that may be there. I've also documented it here: https://github.com/wout/lucky_vite?tab=readme-ov-file#tags

wout avatar Sep 29 '25 17:09 wout