Nuxt bego UI

Nuxt layer with default personnal configs. Strongly inspired by Nuxt UI but with UnoCSS. The aim is to be able to kickstart my very serious projects quickly.

Warning

🚧 Work in progress 👷

Getting started

Installation

Add the dependency to extends in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: 'github:tcastanie/nuxt-bego-ui',
})

Packages in children

@formkit/auto-animate
@iconify-json/mingcute
@nuxt/eslint
@unocss/nuxt
@vueuse/core
@vueuse/nuxt
eslint
nuxt
unocss
vue

pnpm i -D @formkit/auto-animate @iconify-json/mingcute @nuxt/eslint @unocss/nuxt @vueuse/core @vueuse/nuxt eslint nuxt unocss vue

UnoCSS configuration

To reexport the layer config:

// uno.config.ts
import config from './.nuxt/uno.config.mjs'

export default config

To modify/extend it:

// uno.config.ts
import { mergeConfigs } from 'unocss'
import config from './.nuxt/uno.config.mjs'

export default mergeConfigs([config, {
  // your overrides
}])

See more in doc

Eslint

Add your rules in eslint.config.mjs. See more on eslint.nuxt.com

Usage

• Example app.vue:

  <template>
    <BegoHeader title="Nuxt bego UI" />
    <NuxtPage />
    <BegoFooter />
  </template>

• pages/index.vue:

  <template>
    <BegoPage>
      <BegoH1>Hello there!</BegoH1>
    </BegoPage>
  </template>

Configuration

Overridable default app.config.ts:

export default defineAppConfig({
  bego: {
    headerHeight: '4rem',
  },
})

Development

Make sure to install the dependencies

pnpm install

Then start the development server of the .playground folder, on http://localhost:3000

pnpm run dev

Website development

Start the dev server of the website folder, on http://localhost:3000

pnpm run dev:web