⚠️ The package is in the early stages of development and is not ready for use in production!

Quick start

!!! You need Vue.js version 3.2+. (Vue 2 is not supported) !!! You need TailwindCSS version 3.0+.

1. Install Navi via:

NPM

npm install @cifrum/navi

or

Yarn

yarn add @cifrum/navi

2. Import and use Navi

Vue JS Plugin

Nuxt

import Navi from '@cifrum/navi'

export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(Navi)
})

Clear Vue

import { createApp } from 'vue'
import Root from './App.vue'
import Navi from '@cifrum/navi'

const app = createApp(Root)

app.use(Navi)
app.mount('#app')

SCSS

// Set your custom configs
$icon-sizes: (
  'xs': 12,
  'sm': 16,
  'md': 24,
  'lg': 36,
  'xl': 40
);

// Import Navi styles
@import "~@cifrum/navi/src/styles";

3. Add Navi to content tailwind.config.js:

module.exports = {
    presets: [require("@cifrum/navi/src/navi-tailwind-preset")],
    content: [
        //...
        './node_modules/@cifrum/navi/src/**/*.{js,vue,ts}',
    ],
    //...
}