Skip to content

Default Nuxt 3 project with TailwindCSS and much more.

License

Notifications You must be signed in to change notification settings

kubgus/nuxt-tailwind-template

Repository files navigation

Nuxt 3 with TailwindCSS Template

Useful links: 🔗


What will you find here?

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...

Get started!

To get started, install all dependencies:

npm i

Test your app!

npm run dev

Personalize your project!

  • Customize nuxt.config.ts and package.json to fit your project
  • Create your color scheme in tailwind.config.js
  • Add custom error handling in error.vue
  • Consider using app.config.ts

Assets

  • Add your own stylesheet
  • Upload custom fonts
  • Consider adding images you won't use in the public/ directory to assets/
  • Modify assets/css/tailwind.css with custom Tailwind classes

Components

  • Add your own components
  • Nuxt automatically imports any components in your components/ directory

Composables

Content

  • 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

Layouts

  • Create and edit layouts
  • Ideal for extracting common UI or code patterns into reusable layout components

Middleware

Modules

Pages

  • 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

Plugins

Public

  • 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

Server

  • 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/

Utils