https://github.com/cesswhite/v4.20
Minimal, blazing fast, and designed with developers in mind, v4.20 is your go-to starting point for modern web projects with Nuxt
https://github.com/cesswhite/v4.20
nuxt3 nuxt4 nuxt4-starter nuxtui-v3 tailwindcss tailwindcss-v4
Last synced: 20 days ago
JSON representation
Minimal, blazing fast, and designed with developers in mind, v4.20 is your go-to starting point for modern web projects with Nuxt
- Host: GitHub
- URL: https://github.com/cesswhite/v4.20
- Owner: cesswhite
- Created: 2024-12-21T23:10:05.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-04-03T16:34:49.000Z (28 days ago)
- Last Synced: 2025-04-11T00:04:00.468Z (21 days ago)
- Topics: nuxt3, nuxt4, nuxt4-starter, nuxtui-v3, tailwindcss, tailwindcss-v4
- Language: Vue
- Homepage: https://v420.vercel.app/
- Size: 202 KB
- Stars: 24
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# v4.20: The Ultimate Opinionated Nuxt 3 Starter Template
Minimal, blazing fast, and designed with developers in mind, v4.20 is your go-to starting point for modern web projects.
## Built on cutting-edge technologies:
- Nuxt 3 for powerful, streamlined development.
- Nuxt UI v3 for customizable and sleek UI components.
- Pinia for state management simplicity.
- Tailwind CSS v4 for responsive and modern design.
- Fully compatible with the Nuxt v4 folder structure, this template ensures you're ready for the future of web development.
Get started today with v4.20 and build faster, smarter, and better!
## Features
- Nuxt 3
- Pinia for state management
- Tailwind CSS for styling
- Dark mode support
- Primary color switcher
- SEO meta tags
- Responsive design
## Project Setup
### Prerequisites
- Node.js (>= 14.x)
- npm or yarn
### Installation
1. Clone the repository:
```sh
git clone https://github.com/{username}/v420.git
cd v420
```
2. Install dependencies:
```sh
npm install
# or
yarn install
```
### Development
Start the development server:
```sh
npm run dev
# or
yarn dev
```
The application will be available at `http://localhost:3000`.
### Build
To build the project for production:
```sh
npm run build
# or
yarn build
```
### Deployment
After building the project, you can deploy the `dist` directory to your preferred hosting service.
## Project Structure
- `nuxt.config.ts`: Nuxt configuration file.
- `app/`: Contains the main application files.
- `components/`: Vue components.
- `layouts/`: Layout components.
- `pages/`: Page components.
- `stores/`: Pinia stores.
- `assets/css/`: CSS files.
- `public/`: Static assets.
## Usage
### State Management
This project uses Pinia for state management. Example store:
```typescript
export const useIndexStore = defineStore('useIndexStore', {
state: () => ({
name: ''
}),
})
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useIndexStore, import.meta.hot))
}
```
### Components
- `AppLogo`: Displays the application logo.
- `AppSwitchMode`: Toggles between dark and light mode.
- `AppSwitchPrimaryColor`: Switches the primary color theme.
### Pages
- `index.vue`: The main landing page.
- `about.vue`: The about page.
### Layouts
- `default.vue`: The default layout for the application.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request for any changes.
## License
This project is licensed under the MIT License.