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

## Quick start

!!! You need [Vue.js](https://vuejs.org/) **version 3.2+**. (Vue 2 is not supported)<br/>
!!! You need [TailwindCSS](https://tailwindcss.com/) **version 3.0+**.


### 1. Install Navi via:

#### NPM

```sh
npm install @cifrum/navi
```

or

#### Yarn

```sh
yarn add @cifrum/navi
```

### 2. Import and use Navi

#### Vue JS Plugin

##### Nuxt
```javascript
import Navi from '@cifrum/navi'

export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(Navi)
})
```
##### Clear Vue
```javascript
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
```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:

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