feat: Vue plugins system

[ojvribeiro]

Resolves #13

---

This PR introduces a new function, definePlugin, which allows access to the .use() method of the Vue instance used by Vulmix. This enables the registration of any Vue plugin that requires app-level access, such as Vuetify or ApexCharts, which register components globally.

Usage

All you need to do is install the plugin following its documentation. Then, create a new plugin file (it can be a .js or .ts file) inside the /plugins folder.

In this case, we'll use Vuetify as an example (Vuetify docs):

npm install vuetify

// plugins/vuetify.js

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

export default definePlugin((app) => {
  app.use(vuetify)
})

Note
The definePlugin function is auto-imported. 😄

And that's it! You can now use Vuetify components in your Vulmix app:

<template>
  <v-switch label="Switch"></v-switch>
</template>