Welcome to the Nuxt 4 Starter project! This starter template is designed to help you quickly set up a Nuxt 4 application with essential features and best practices.
- Nuxt 3 (Compatibility Mode): Leverage the power of Nuxt 3 while maintaining compatibility with Nuxt 4.
- Nuxt UI: Utilize Nuxt UI components for a seamless development experience.
- Tailwind CSS: Style your application with the utility-first CSS framework.
- Nuxt Content: Manage your content with ease using Nuxt Content.
- Custom Fonts: Easily integrate custom fonts into your project.
- Optimized Images: Use WebP format and lazy loading for better performance.
- nuxt-og-image: Generate Open Graph images dynamically.
To get started, clone the repository and install the dependencies:
# with pnpm
pnpm dlx degit regenrek/nuxt4-starter-clean my-nuxt4-project
# or with npm
npx degit regenrek/nuxt4-starter-clean my-nuxt4-project
# or classic
git clone --depth 1 git@github.com:regenrek/nuxt4-starter-clean.git <my-project-name>
cd <my-project-name>
pnpm installRun the development server:
pnpm run devBuild the application for production:
pnpm run buildAdd your custom fonts in the assets directory and configure them in your tailwind.config.js:
module.exports = {
theme: {
extend: {
fontFamily: {
custom: ['YourCustomFont', 'sans-serif'],
},
},
},
};Use WebP format and lazy loading for images. Example:
<img src="/path/to/image.webp" alt="Description" loading="lazy" />This project is licensed under the MIT License.
Follow me on X @kregenrek