Tailwind Resources Logo Tailwind Resources
Top Nuxt3 screenshot

Top Nuxt3

Author Avatar Theme by Ctwhome
Updated: 18 Feb 2022
115 Stars

Full stack Nuxt 3 Template starter with Supabase and Tailwindcss

Github Live Preview

Categories

Supabase Daisyui Fullstack

Overview

The Nuxt 3 Starter Template is a fast and convenient development template that comes with everything pre-installed for an efficient starting point. It allows users to remove any unnecessary components and start coding right away. This template is inspired by the Vitesse template by @antfu and is created by @ctwhome.

Features

  • Nuxt 3: The template is built with Nuxt 3, providing powerful features and improved performance.
  • The <script setup> syntax: Allows for more concise and readable component declarations.
  • Zero-config cloud functions and deploy SSR: Works seamlessly with Netlify for server-side rendering and deploying cloud functions.
  • APIs auto importing: Automatically imports APIs for Composition API, VueUse, and custom composables.
  • ESR, File-based routing, components auto importing, modules, etc.: Various features and optimizations to enhance development workflow.
  • TypeScript: Supports TypeScript for static typing and better code organization.
  • .env settings environments: Provides environment setting configurations.
  • Format on save with ESLint: Easily maintain a clean codebase with automatic formatting using ESLint.
  • Vite - Instant HMR: Uses Vite for faster hot module replacement and instant feedback during development.
  • PWA - vite-plugin-pwa: Enables Progressive Web App functionality, including offline mode and new content availability prompts.
  • TailwindCSS 3 - JIT engine by default: Integrates TailwindCSS with the Just-in-Time (JIT) engine for efficient styling.
  • DaisyUI - Theme CSS components for TailwindCSS: Supports additional CSS components for easier theming and styling.
  • Theme switcher: Allows for custom themes and offers 22 different themes to choose from.
  • Styled Markdown HTML components: Supports rendering of Vue and HTML content from Markdown.
  • Dynamic pages: Allows for dynamic page generation but has a limitation with Vite for importing files based on route parameters.
  • All Iconify on-demand: Provides access to over 100,000 SVG icons that can be fully customized, though SSR may throw a warning.
  • Multi-language support with vue-i18n-next: Supports multiple languages using the vue-i18n-next library.
  • YAML, JSON, JSON5 locale files: Localizes content using YAML, JSON, and JSON5 files.
  • Localize routes: Supports localized routes such as “/en/about” and “/es/about”.
  • Supabase: Work in progress feature that enables full stack development with authentication, real-time capabilities, storage, and PostgreSQL integration.
  • State Management via Pinia: Work in progress feature that provides a lightweight and flexible state management solution.
  • Feed RSS generator: Work in progress feature that allows for generating RSS feeds.
  • Nuxt Modules: Includes various Nuxt modules such as VueUse, a collection of composition APIs, and Pinia, a type-safe store for Vue.

Installation

To install and run the Nuxt 3 Starter Template locally, follow these steps:

  1. Update your forked repository:
# Add remote from the original repository in your forked repository
git remote add upstream <Original Repository URL>

# Updating your fork from the original repo to keep up with their changes
git pull upstream main
  1. Start the development server:
# Start the development server on http://localhost:3000
npm run dev

  1. Optional: IDE recommendation.

    • It is recommended to use VS Code with the Volar extension for the best development experience. If you have the Vetur extension, you may want to disable it.

  2. Building for production:

# Build the application for production
npm run build

# Check out the deployment documentation for further instructions

Summary

The Nuxt 3 Starter Template is a comprehensive starting point for developing web applications with Nuxt 3. It offers a wide range of features, including Nuxt 3 compatibility, enhanced syntax, cloud function support, APIs auto importing, TypeScript integration, PWA capabilities, theming options, Markdown support, multi-language support, and more. Despite being a work in progress, the template is already a powerful tool for developers looking to leverage the latest features of Nuxt 3.