New Project with Nuxt.js

  1. Install the dependencies in your Nuxt project:
yarn
yarn add @vunix/nuxt
npm
npm install @vunix/nuxt
pnpm
pnpm install @vunix/nuxt
  1. Configure your nuxt.config.ts to load the module
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
// https://nuxt.com/docs/guide/directory-structure/nuxt.config#nuxt-config-file
export default defineNuxtConfig({
  ...
  modules: [
    '@vunix/nuxt',
  ],
})
The @vunix/nuxt module automaticaly install @nuxtjs/tailwindcss module. If the module is already injected please remove it from nuxt.config.ts. In the future this will be injected according to the preset type (tailwindcss, unocss ...)
Please check if the tailwind version of Vunix module is compatible with the tailwind version of your project. We are using currently using the version 3
Check the nuxt-example package for example and check the nuxt module section
✨ Well done! You can now start using Vunix with Nuxt.js.

New project with Vue.js

  1. Install the dependencies in your Vue project:
yarn
yarn add @vunix/vue
npm
npm install @vunix/vue
pnpm
pnpm install @vunix/vue

Global components import

  1. Add the Vunix vue plugin to your app
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { plugin } from '@vunix/vue'
import { presets } from '@vunix/vue'
import './assets/main.css'
const app = createApp(App)
app.use(router).use(plugin, {
  preset: presets.vunix
})
app.mount('#app')

Due to performance issue you will always need to specify the preset path with Vue.js.

See more about presets

✨ Well done! You can now start using Vunix with Vue.js

Tree shaking components import

The better approach is to use the vite plugin unplugin-vue-components for auto import of Vunix components

vite.config.ts
import { ComponentResolver as VunixComponentResolver } from '@vunix/vue'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        VunixComponentResolver()
      ]
    }),
  ],
  ...
})
Check the vue-example package for usage and installation
Edit this page on GitHub
Table of Contents