Useful links: 🔗
This is a template for a new project with Nuxt 3 and TailwindCSS. Setting everything up can be very challenging. This template will get you going in no time! 🚀
- Nuxt 3 implementation, and configuration
- TailwindCSS implementation, support, and configuration
- Basic layout and error pages
- A custom loading bar and page transitions
- Basic metadata and SEO
- Google's Material icons
- And much more...
To get started, install all dependencies:
npm i
Test your app!
npm run dev
- Customize
nuxt.config.tsandpackage.jsonto fit your project - Create your color scheme in
tailwind.config.js - Add custom error handling in
error.vue - Consider using app.config.ts
- Add your own stylesheet
- Upload custom fonts
- Consider adding images you won't use in the
public/directory toassets/ - Modify
assets/css/tailwind.csswith custom Tailwind classes
- Add your own components
- Nuxt automatically imports any components in your
components/directory
- Render your content with built-in components
- Query your content with a MongoDB-like API
- Use your Vue components in Markdown files with the MDC syntax
- Automatically generate your navigation
- Create and edit layouts
- Ideal for extracting common UI or code patterns into reusable layout components
- Nuxt provides a file-based routing to create routes within your web application using Vue Router under the hood
- Create and edit unique pages in your project
- The
public/directory is directly served at the server root and contains public files that have to keep their names or likely won't change - Examples:
robots.txt,favicon.ico
- Create your own API in
server/api/ - Add API routes without the "/api" prefix in
server/routes/ - Inject code to run on every request before any other server route in
server/middleware/