Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kubgus/nuxt-tailwind-template
Default Nuxt 3 project with TailwindCSS and much more.
https://github.com/kubgus/nuxt-tailwind-template
default nuxt nuxt-tailwindcss nuxt3 nuxtjs project tailwind tailwind-css tailwindcss template
Last synced: about 11 hours ago
JSON representation
Default Nuxt 3 project with TailwindCSS and much more.
- Host: GitHub
- URL: https://github.com/kubgus/nuxt-tailwind-template
- Owner: kubgus
- License: mit
- Created: 2023-07-03T23:16:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-17T21:10:22.000Z (over 1 year ago)
- Last Synced: 2024-01-27T08:17:39.602Z (12 months ago)
- Topics: default, nuxt, nuxt-tailwindcss, nuxt3, nuxtjs, project, tailwind, tailwind-css, tailwindcss, template
- Language: Vue
- Homepage:
- Size: 279 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Nuxt 3 with TailwindCSS Template
Useful links: 🔗
- [Nuxt 3 Documentation](https://nuxt.com/docs/getting-started/introduction)
- [NuxtTailwind Documentation](https://tailwindcss.nuxtjs.org/getting-started/setup)
- [TailwindCSS Documentation](https://tailwindcss.com/docs/)
- [TailwindUI](https://tailwindui.com/)
## 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](https://nuxt.com/docs/guide/directory-structure/app-config)
[**Assets**](https://nuxt.com/docs/guide/directory-structure/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**](https://nuxt.com/docs/guide/directory-structure/components)
- Add your own components
- Nuxt automatically imports any components in your `components/` directory
[**Composables**](https://nuxt.com/docs/guide/directory-structure/composables)
[**Content**](https://nuxt.com/docs/guide/directory-structure/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**](https://nuxt.com/docs/guide/directory-structure/layouts)
- Create and edit layouts
- Ideal for extracting common UI or code patterns into reusable layout components
[**Middleware**](https://nuxt.com/docs/guide/directory-structure/middleware)
[**Modules**](https://nuxt.com/docs/guide/directory-structure/modules)
[**Pages**](https://nuxt.com/docs/guide/directory-structure/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**](https://nuxt.com/docs/guide/directory-structure/plugins)
[**Public**](https://nuxt.com/docs/guide/directory-structure/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**](https://nuxt.com/docs/guide/directory-structure/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**](https://nuxt.com/docs/guide/directory-structure/utils)