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.
- Much better typing for the library #41. Big thanks to @francois-codes for the contribution!
- Added
worker
option tovite.config.js
, and added instruction how to deal with typescript error #45
- Slots are now rendered correctly in SSR #39
- added type: module to package.json in live_vue to fix the older nodejs module resolution issue #36
- Added explicit extensions to all JS imports. It should fix some issues with module resulution. #36
- Added hint to pass
--silent
flag tonpm
watcher inINSTALLATION.md
. It preventsnpm
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__)]
]
- 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 😅
- Migrated the project to TypeScript 💜 #32
- Added
createLiveVue
entrypoint to make it easier to customize Vue app initialization
assets/vue/index.js
should export app created bycreateLiveVue()
, not just available components. See migration below.
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.
- 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 ascreateLiveVue().setup()
and can be imported by both client and server bundles.
- Improved
pathToFullPathAndFilename
to work withindex.vue
files. Now../ComponentName/index.vue
can be referenced asComponentName
#23
- Support for custom Vue instance initialization #13 by @morfert
- Invalid live_vue import in copied package.json (
file:../..
->file:../deps/live_vue
) - Changed
useLiveVue
inject key fromSymbol()
to_live_vue
string, so it's working if Vite does a reload and Symbol is re-evaluated.
- 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 forindex.mjs
andserver.mjs
- 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
- Removed
build: {modulePreload: { polyfill: false }}
from vite.config.js as it made it impossible to usevite/modulepreload-polyfill
. To migrate: please remove that line from yours vite.config.js. Fixed #12
- Fixed missing import in loadManifest
- Added
import "vite/modulepreload-polyfill";
toassets/vue/index.js
. To migrate, add that line to the top. It adds polyfill for module preload, required for some browsers. More here: https://vitejs.dev/config/build-options#build-modulepreload
- Removed
body-parser
dependency fromlive_vue
. Should fix #9
- Props are correctly updated when being arrays of structs
- 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
- Hot reload of CSS when updating Elixir files
- Simplified
assets/vue/index.js
file - mapping filenames to keys is done by the library. Previous version should still work.
- removed esbuild from live_vue,
package.json
points directly toassets/js/live_vue
- added support to lazy loading components. See more in README. To migrate, ensure all steps from installation are up-to-date.
QoL release
@
added to Vite & typescript paths. To migrate, seeassets/copy/tsconfig.json
andassets/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, copyassets/copy/vue/index.js
to your project.
- Adjusted files hierarchy to match module names
- Publishing with expublish
- Start of the project
- End-To-End Reactivity with LiveView
- Server-Side Rendered (SSR) Vue
- Tailwind Support
- Dead View Support
- Vite support