Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryan-ahn/npm-nuxt3-starter
Nuxt3 프로젝트 시작을 위한 NPM 패키지
https://github.com/ryan-ahn/npm-nuxt3-starter
eslint-rules nuxt3 pinia stylelint-rules typescript vite
Last synced: about 1 month ago
JSON representation
Nuxt3 프로젝트 시작을 위한 NPM 패키지
- Host: GitHub
- URL: https://github.com/ryan-ahn/npm-nuxt3-starter
- Owner: ryan-ahn
- License: mit
- Created: 2023-06-14T12:23:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-31T05:39:39.000Z (8 months ago)
- Last Synced: 2024-09-28T14:03:13.314Z (about 2 months ago)
- Topics: eslint-rules, nuxt3, pinia, stylelint-rules, typescript, vite
- Language: JavaScript
- Homepage:
- Size: 877 KB
- Stars: 3
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```shell
npx nuxt3-starter my-project
cd my-project
```
### 2) Run Project
```shell
npm run dev
```
### 3) Run Deploy
```shell
npm run build
```
## Using with Vue3 Script Setup
```vue
{{ title }}
// use function
const function = () => {console.log('Hello World!')}
// use props
const props = defineProps({title})
```
## Using with Store
```vue
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()
```
## Using with Mixin
```scss
.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)
}
```