Ryan's Nuxt3 Awesome Starter

Features

• [x] ⚙️  Small & Fast Bundler (Vite)
• [x] 🗝️  Typed Programming (Typescript)
• [x] 🧩  SSR & Page Transition (Nuxt3)
• [x] 📚  Composition API & Setup (Vue3)
• [x] 🕋  Simple Store (Pinia)
• [x] 📙  Use Strict Codebase (ESLint)
• [x] 📘  Use Strict Style (StyleLint)
• [x] 🧵  Built-in Component & Layout
• [x] 🚰  Handle Page to Middleware
• [x] ✨  Setting Reset Style
• [x] ⚡️  Setting Mixin Style
• [x] 📍  Absolute Path
• [x] 📱  Check Device
• [x] 📫  Page SEO
• [ ] 🪄  Dark Mode

Frameworks

• Bundler : Vite
• SSR : Nuxt3
• Core : Vue3
• Store : Pinia

Code Pattern

• assets - static resource
• components - atomic stateless components
• containers - stateful components
• pages - page components(SEO)
• public - default public
• plugins - plugins
• interface - interfaces
• layouts - layouts
• server - ssr
• store - store
• styles - style set
• utils - hooks, helper, handler

Getting Started

1) Installation

npx nuxt3-starter my-project
cd my-project

2) Run Project

npm run dev

3) Run Deploy

npm run build

Using with Vue3 Script Setup

<template>
  <h1>{{ title }}</h1>
</template>

<script setup lang="ts">
// use function
const function = () => {console.log('Hello World!')}
// use props
const props = defineProps({title})
</script>

Using with Store

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import useDataStore from '@store/useDataStore';
// use store
const store = useDataStore();
// use store state
const { data } = storeToRefs(store);
// use store function
store.getData()
</script>

Using with Mixin

.app {
  // flex set(justify-content, align-items, flex-direction)
  @include flexSet('center', 'center', 'row')

  // box set(width, height, border-radius)
  @include boxSet(00px, 00px, 00px)

  // color set(color, background-color)
  @include colorSet($white, $black)

  // background set(url, object-fit)
  @include backgroundSet('url', 00px)

  // font set(font-size, font-weight, line-height)
  @include fontSet(00px, 000, 00px);

  // ellipsis set(line, line-height)
  @include ellipsisSet(0, 00px)

  // shadow set(length, length, blur, color, opacity)
  @include shadowSet(0, 0, 0, $white, 0.1)
}