nuxt3-navbar

Example of a UI component library in Nuxt 3

Setup

Create a new Nuxt 3 project

npx nuxi init my-project

Install the custom Nuxt 3 UI library

npm install nuxt3-navbar

Setup TailwindCSS

TailwindCSS

Configure your project to use the library

Edit the nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
    buildModules: ['nuxt3-navbar/nuxt'],
})

Use components

<n3-navbar />
<n3-navbar-body :hiring="hiringShow.hiring" @changeHiring="handleHiring"/>
<n3-navbar-footer />

<script lang="js">
  import "~/assets/css/tailwind.css"
  import { showHiring } from '@/stores/hiring'

  export default {
    setup(){
        const hiringShow = showHiring()
        return {hiringShow}
    },
    methods: {
      handleHiring() {
        showHiring().changeHiring()
      }
    }
  }
</script>