Nuxt 3 Awesome Starter

a Nuxt 3 starter template with a lot of useful features, integrated with TailwindCSS 3. Easy use and implemented in Nuxt Layer, you can extend this template with zero config.
Nuxt Awesome Starter v2 brings many changes, separating core component apps and main business logic into the /app folder. and also provides the option to also be integrated with the nuxt layer to make it easier to bring all of our Awesome features and components to your project.

• 📖  Demo
• 🕹  Play online (with Nuxt Layer)
• 👀  Play online (app)

NOTES

• This Project using "pnpm" or "bun" as package manager
• this is Nuxt 3 Awesome Starter V2, you can check V1 in this link

Preview

Features

• [X] 📚 Nuxt Layer Support
• [X] 💨 Tailwind CSS v3
• [X] ✨ Headless UI
• [X] 🔔 Nuxt Icon
• [X] 🛹 State & Store Management (Pinia)
• [X] 📦 Vue Composition Collection (Vueuse)
• [X] 🪝 Built-in Awesome Component & Layout
• [X] 🌙 Theme Manager (Color Mode)
• [X] Configurable Theme (Easy to change)
  • [X] Primary Colors
  • [X] Font

To Dos

• [X] Nuxt Layer Support
• [X] Nuxt Awesome Modules Core
  • [X] create modules ~/modules/awesome.ts
• [X] Adding Pinia
  • [X] auto import "defineStore" as "definePiniaStore"
  • [X] auto import folder "stores"
• [X] Eslint & Prettier
• [X] 🌙 Theme Switcher (light, dark, system)
• [ ] 🇮🇩 Language Switcher
• [ ] Awesome Components
  • [X] Card
  • [X] Content (@nuxt/content bridge)
  • [X] Form
    • [X] Text Input
    • [X] Switch
  • [X] Action
    • [X] Button
    • [X] Link
  • [X] Tabs
  • [X] Pages
    • [X] Welcome
    • [X] Error
  • [X] Action Sheet
  • [X] Alert Banner
  • [ ] Modal
  • [ ] Toast

Getting Started

Installation

to use Nuxt Awesome Starter you can choose one of the following options:

• using nuxt layer
• using direct clone

Using with Nuxt Layer (Simple Way)

nuxt 3 have a new feature called "Nuxt Layer", with this feature you can create a new project with a template that has been provided by the community. you can see on .demo to see how to use this template with nuxt layer.
this is a simple way to use this template :

• create a new fresh nuxt 3 project with pnpm dlx nuxi@latest init my-app
• install nuxt awesome deps pnpm add @nuxt-awesome/theme
• add extends: '@nuxt-awesome/theme' on your nuxt.config.ts file

  # nuxt.config.ts
  export default defineNuxtConfig({
    devtools: { enabled: true },
    extends: [
      '@nuxt-awesome/theme',
    ]
  })

• after that, you can explorer app.config.ts to see what you can change on this template.
• remove your app.vue in root project if you want to use our nuxt awesome as root layout.

Using with Direct Clone

you can direct to clone this repository and just make change on app/ folder as your main project folder.

• clone this repository

  git clone https://github.com/viandwi24/nuxt3-awesome-starter

• install dependencies

  pnpm install

• run development server

  pnpm dev