View Source Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

0.5.2 - 2024-10-08

Changed

  • Added hint to pass --silent flag to npm watcher in INSTALLATION.md. It prevents npm from printing executed command which is not useful and makes output messy.
config :my_app, MyAppWeb.Endpoint,
  # ...
  watchers: [
    npm: ["--silent", "run", "dev", cd: Path.expand("../assets", __DIR__)]
  ]

0.5.1 - 2024-10-08

Fixed

  • Fixed a bug where the server was not preloading the correct assets for the Vue components. It happened because CursorAI "skipped" important part of the code when migrating to the TypeScript 😅

0.5.0 - 2024-10-08

Changed

  • Migrated the project to TypeScript 💜 #32
  • Added createLiveVue entrypoint to make it easier to customize Vue app initialization

Deprecations

  • assets/vue/index.js should export app created by createLiveVue(), not just available components. See migration below.

Migration

In assets/js/app.js, instead of:

export default {
  ...import.meta.glob("./**/*.vue", { eager: true }),
  ...import.meta.glob("../../lib/**/*.vue", { eager: true }),
}

use:

// polyfill recommended by Vite https://vitejs.dev/config/build-options#build-modulepreload
import "vite/modulepreload-polyfill"
import { h } from "vue"
import { createLiveVue, findComponent } from "live_vue"

export default createLiveVue({
  resolve: name => {
    const components = {
      ...import.meta.glob("./**/*.vue", { eager: true }),
      ...import.meta.glob("../../lib/**/*.vue", { eager: true }),
    }

    // finds component by name or path suffix and gives a nice error message.
    // `path/to/component/index.vue` can be found as `path/to/component` or simply `component`
    // `path/to/Component.vue` can be found as `path/to/Component` or simply `Component`
    return findComponent(components, name)
  },
  setup: ({ createApp, component, props, slots, plugin, el }) => {
    const app = createApp({ render: () => h(component, props, slots) })
    app.use(plugin)
    app.mount(el)
    return app
  },
})

then, in assets/js/app.js, instead of:

import components from "./vue"

simply do

import { getHooks } from "live_vue"
import liveVueApp from "./vue"
// ...

const hooks = { ...getHooks(liveVueApp) }

If you had any custom initialization code, you have to move it to createLiveVue().setup() function.

Fixed

  • Nicely formatted JS error stracktraces during SSR commit
  • Previously initializeVueApp was not working in SSR mode, since it was declared in app.js which couldn't be imported by server bundle. Now it's in a separate file as createLiveVue().setup() and can be imported by both client and server bundles.

0.4.1 - 2024-08-30

Changed

  • Improved pathToFullPathAndFilename to work with index.vue files. Now ../ComponentName/index.vue can be referenced as ComponentName #23

0.4.0 - 2024-06-12

New feature

  • Support for custom Vue instance initialization #13 by @morfert

0.3.9 - 2024-06-07

0.3.8 - 2024-06-01

Fixed

  • Invalid live_vue import in copied package.json (file:../.. -> file:../deps/live_vue)
  • Changed useLiveVue inject key from Symbol() to _live_vue string, so it's working if Vite does a reload and Symbol is re-evaluated.

Added

  • Added live_vue, phoenix, phoenix_html and phonenix_live_vue to vite optimizeDeps.include config options. It should pre-bundle these packages in development, making it consistent with packages imported from node_modules and improve DX.
  • Added initial typescript definitions. Apparently it's enough to name them <filename>.d.mts, so I've created them both for index.mjs and server.mjs

0.3.7 - 2024-05-26

Changed

  • Added a Mix.Task to make JS file setup more straightforward and cross-platform #11. Contribution by @morfert 🔥
  • Installation instruction was moved to the separate file
  • Package.json was added to files automatically copied from live_vue when using mix live_vue.setup

Fixed

  • Removed build: {modulePreload: { polyfill: false }} from vite.config.js as it made it impossible to use vite/modulepreload-polyfill. To migrate: please remove that line from yours vite.config.js. Fixed #12

0.3.6 - 2024-05-24

Fixed

0.3.5 - 2024-05-24

Changed

  • Removed body-parser dependency from live_vue. Should fix #9

0.3.4 - 2024-05-22

Fixed

  • Props are correctly updated when being arrays of structs

0.3.3 - 2024-05-22

Fixed

  • Javascript imports were mixed - vitePlugin.js was using CJS, rest was using ESM. Now it's explicit by adding ".mjs" extension.
  • Removed :attr declarations for <.vue> component to avoid warnings related to unexpected props being passed to :rest attribute #8

0.3.2 - 2024-05-19

Fixed

  • Hot reload of CSS when updating Elixir files

0.3.1 - 2024-05-17

Changed

  • Simplified assets/vue/index.js file - mapping filenames to keys is done by the library. Previous version should still work.

0.3.0 - 2024-05-17

CHANGED

  • removed esbuild from live_vue, package.json points directly to assets/js/live_vue
  • added support to lazy loading components. See more in README. To migrate, ensure all steps from installation are up-to-date.

0.2.0 - 2024-05-17

QoL release

Added

  • @ added to Vite & typescript paths. To migrate, see assets/copy/tsconfig.json and assets/copy/vite.config.js
  • Added Vite types to tsconfig.json to support special imports, eg. svg. To migrate, add "types": ["vite/client"].
  • Added possibility to colocate Vue files in lib directory. To migrate, copy assets/copy/vue/index.js to your project.

Changed

  • Adjusted files hierarchy to match module names
  • Publishing with expublish

[0.1.0] - 2024-05-15

Initial release

  • Start of the project
  • End-To-End Reactivity with LiveView
  • Server-Side Rendered (SSR) Vue
  • Tailwind Support
  • Dead View Support
  • Vite support