Skip to content

Nuxt layer with default personnal configs. Strongly inspired by Nuxt UI but with UnoCSS.

License

Notifications You must be signed in to change notification settings

tcastanie/nuxt-bego-ui

Repository files navigation

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/core
@unocss/nuxt
@vueuse/core
@vueuse/nuxt
eslint
nuxt
unocss
vue
pnpm i -D @formkit/auto-animate @iconify-json/mingcute @nuxt/eslint @unocss/core @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

About

Nuxt layer with default personnal configs. Strongly inspired by Nuxt UI but with UnoCSS.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published