Nuxt
Installation
Instead of installing
anu-vue
package, install@anu-vue/nuxt
.bash# pnpm pnpm add @anu-vue/nuxt && pnpm add -D @unocss/nuxt # yarn yarn add @anu-vue/nuxt && yarn add -D @unocss/nuxt # npm npm install @anu-vue/nuxt && npm install -D @unocss/nuxt
Add Anu & UnoCSS in the nuxt modules array in the
nuxt.config.ts
file as shown below:tsimport { defineNuxtConfig } from 'nuxt/config' export default defineNuxtConfig({ modules: ['@anu-vue/nuxt', '@unocss/nuxt'], })
Add UnoCSS config file
uno.config.ts
with the configuration shown below:tsimport { defineConfig } from 'unocss' export default defineConfig({ include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'], })
It's done, Let's try the button component 🥳
<template>
<ABtn>Primary</ABtn>
</template>
Configuration
To configure Anu, You can use anu
property in nuxt.config.ts
file.
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: ['@anu-vue/nuxt', '@unocss/nuxt'],
anu: {
// options
},
})
You'll get autocompletion for all the available options.
WARNING
If you set presets: []
in uno.config.ts
then UnoCSS will disable all auto injected presets and you manually have to inject anu-vue
preset & others mentioned in vue integration guide.
INFO
When you update icons preset options in uno.config.ts
, You'll discard auto injected option by Anu. You have to manually add icons preset options as mentioned in vue integration guide.
Volar Support
If you are using nuxt, Anu's module auto inject types for you you don't need to do anything.
Happy coding 🙌🏻