Quick start #

Installation #

Please install it with your favorite package manager.

pnpm add @flavorly/vanilla-components

yarn add @flavorly/vanilla-components

npm install @flavorly/vanilla-components

Once installed on your project, install also the peer dependencies, those are packages that are required for Vanilla Components to work, but they are not bundled with Vanilla Components:

pnpm add @headlessui/vue @popperjs/core

yarn add @headlessui/vue @popperjs/core

npm add @headlessui/vue @popperjs/core

Vue Plugin #

Now that the package is install you may go further and enable the package on your Vue application entry point. This setup is only required to register the global & default configuration, no components are registered.

import { createApp } from 'vue'
import { Plugin } from '@flavorly/vanilla-components'
// Or If you prefer
import { VanillaComponents } from '@flavorly/vanilla-components'
const app = createApp()
app.use(VanillaComponents)

The plugin accepts a second argument that could be used to provide your configuration, this topic is covered fully in the next chapter Configuration

Basic Usage #

After installation, you may import the components as you need them, if you are not happy with the namings go further and create an alias. You can see the full list of named exports here, that should be always up-to-date.

<script setup lang="ts">
import { Button, Avatar } from '@flavorly/vanilla-components' 
</script>

<template>
    <Avatar /> 
    <Button>Continue</Button>
</template>

Typescript #

Typescript types are also exported from the library, in case you need them to type your templates/scripts.

<script setup lang="ts">
import type { ButtonProps } from '@flavorly/vanilla-components'  
</script>

Using Tailwind #

If you are using Tailwind please ensure your configuration file matches the following:

Install the required plugins:

pnpm add @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/forms

yarn add @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/forms

npm add @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/forms

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
    './node_modules/@flavorly/vanilla-components/dist/presets/tailwind/all.json', 
  ],
  theme: {
    extend: {
      colors: {
        // Set your primary color
        primary: colors.indigo, 
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),

    // Forms plugin is required if you are using the tailwind preset
    require('@tailwindcss/forms'), 
  ],
}