Skip to content
On this page


Adding Vanilla Components to your Nuxt project is pretty easy, first install the package normally as mentioned on the Quick Start page.


Get started setting up your nuxt project by following the Nuxt 3 documentation

Create a new folder on your project root called plugins and create a new file called vanilla-components.ts inside it.

├─ your-nuxt-project-root
   ├─ plugins
      ├─ vanilla-components.ts

And add the following code to it:

import { VanillaComponents } from "@flavorly/vanilla-components";

export default defineNuxtPlugin(nuxtApp => {
    // You can also override the default options here

That should be it! You should be up and running with Vanilla Components on your Nuxt project. Please keep in mind that because vanilla components default preset ships with tailwind you might see no styles, check the next section to learn how to configure together with tailwind.

Tailwind CSS Configuration ( Optional )

To get started install the recommended module for Nuxt + Tailwind and follow the regular setup guide recommended by the package.

Install @nuxt/tailwindcss & @tailwindcss/forms using your package manager of choice:

pnpm add -D @nuxtjs/tailwindcss @tailwindcss/forms
yarn add --dev @nuxtjs/tailwindcss @tailwindcss/forms
npm install --save-dev @nuxtjs/tailwindcss @tailwindcss/forms

Create two files, one called tailwind.config.js at the root of your project and the other assets/css/tailwind.css on your project root.

├─ your-nuxt-project-root
   ├─ assets
      ├─ tailwind.css
   ├─ tailwind.config.js

Update your tailwind.config.js file:

const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  darkMode: 'class',
  content: [
    // Add our default tailwind preset to the content list
  theme: {
    extend: {
      colors: {
        // Set your primary color
        primary: colors.indigo, 
  plugins: [

    // Forms plugin is required if you are using the tailwind preset

That should be it! You should have a working tailwind setup with the default Vanilla Components preset.

Released under the MIT License.