Skip to content

Vuero Plugins

Vuero has a plugin system that allows you to extend Vue, Vue Router, etc. with additional features. They run before the app is created and can be used to add global components, directives, mixins, etc.

In addition, when using SSR, you can act on the underlying request and response objects via h3 events.

├─ plugins/
│  └── *.ts
├── app.ts
├── entry-client.ts
├── entry-server.ts
├── router.ts
└─ VueroApp.vue

Creating a plugin

To create a plugin, you need to ceate a file in the src/plugins directory. The file will be automatically imported and executed by the app.

// src/plugins/my-plugin.ts
import { definePlugin } from '/@src/utils/plugins'

export default definePlugin(({ app, router, head, pinia, event }) => {
  // your plugin code here
import type { App } from 'vue'
import type { VueHeadClient, MergeHead } from '@unhead/vue'
import type { Router } from 'vue-router/auto'
import type { Pinia } from 'pinia'
import type { H3Event } from 'h3'

interface VueroPluginContext {
  app: App
  router: Router
  head: VueHeadClient<MergeHead>
  pinia: Pinia
  event?: H3Event

Available plugins

cache-headers.tsAdd cache headers to the response via h3 events
darkmode.tsProvide a reactive dark mode state to Vue
data-loader.tsRegister Unplugin Vue Router data loaders to Vue
directives.tsRegister global Vue directives
i18n.tsRegister vue-i18n plugin
notyf.tsRegister Client Only notyf instance
nprogress.tsRegister client only nprogress instance in Vue Router
session-check.tsExample of a session check plugin using Vue Router Guard
v-calendar.tsRegister Lazyloader for v-calendar components
vue-tippy.tsRegister vue-tippy plugin
vue3-apexcharts.tsRegister Client Only Lazyloader for vue3-apexcharts components
vueform.tsRegister Lazyloader for @vueform/multiselect and @vueform/slider components
vuero-context.tsProvide a shared reactive state to Vue

All Rights Reserved