Use Vite/Vue Plugin

Valaxy is compatible with Vite/Vue plugins. You can refer to the following examples for usage.

Using Vite Plugins ​

Using vite-plugin-pwa ​

valaxy.config.ts
ts
import type { ThemeConfig } from 'valaxy-theme-yun'
import { defineValaxyConfig } from 'valaxy'
import { VitePWA } from 'vite-plugin-pwa'

export default defineValaxyConfig<ThemeConfig>({
  vite: {
    plugins: [
      // https://vite-pwa-org.netlify.app/
      VitePWA(),
    ],
  },
})
setup/main.ts
ts
import { defineAppSetup } from 'valaxy'

export default defineAppSetup(({ router, isClient }) => {
  router.isReady().then(async () => {
    if (!isClient)
      return
    const { registerSW } = await import('virtual:pwa-register')
    registerSW({ immediate: true })
  })
})

For more configuration options, please refer to vite-plugin-pwa.

Using Vue Plugins ​

TIP

Valaxy integrates @vitejs/plugin-vue by default. If you need to customize the @vitejs/plugin-vue configuration, you can use the vue config option.

See Extend Config for details.

For example, to use Element Plus, you can add the following configuration in setup/main.ts:

setup/main.ts
ts
import ElementPlus from 'element-plus'

import { defineAppSetup } from 'valaxy'
import 'element-plus/lib/theme-chalk/index.css'

export default defineAppSetup(({ app }) => {
  app.use(ElementPlus)
})

Contributors