v-lazy-show


A compile-time directive to lazy initialize v-show for Vue. It makes components mount after first truthy value (v-if), and the DOM keep alive when toggling (v-show).

Install

``bash
npm i -D v-lazy-show
`

This package is completely compile-time, installed it as a nodeTransformer in Vue's compiler options.

For example in Vite:

`ts
// vite.config.ts
import { transformLazyShow } from 'v-lazy-show'
import { defineConfig } from 'vite'

export default defineConfig({
plugins: [
Vue({
template: {
compilerOptions: {
nodeTransforms: [
transformLazyShow, // <--- add this
],
},
},
}),
]
})
`

In Nuxt:

`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'v-lazy-show/nuxt'
]
})
`

Usage

You can use it as a directive. Both v-lazy-show and v-show.lazy are supported and equivalent.

`vue



`

With it, will not be mounted for the first render. Until the first time show.value = true, it will be mounted and the DOM will be kept alive. Later if you switch show.value back to false, will not be unmounted, instead, display: none will be applied to the DOM just like v-show.

Use Cases

It can be helpful to use with some component that is expensive to create/mount. For example, if you have a tabs component, that some tab contains a heavy component. Using v-if, it will get the component destroyed and re-created when switching tabs. Using v-show, you will need to pay the mounting cost on the initial render even you haven't switch to that tab yet.

With v-lazy-show, you can have the best of both worlds. You can think it as a v-show that lazy initializes, or a v-if that caches the DOM.

Similarly, this can be helpful for