Nuxt Starter

A Nuxt 3 starter template or boilerplate with a lot of useful features. and integrated with TailwindCSS 3.

Features

• 💨 Tailwind CSS v3
• ✨ Headless UI
• 🔔 Icon Pack Component (unplugin-icons)
• 🛹 State & Store Management (Pinia)
• 🚩 Localization (i18n) by @intlify & Auto Generate Locales
• 📦 Vue Composition Collection (Vueuse)
• 📚 Content Management System (Nuxt Content) [SSR]
• 🌙 Switch Theme (light, dark, system, realtime)
• 💅 Prettier
• 💻 Consola
• 🚀 Release It
• 🌎 Vue I18n Internationalization
• ✉️ Contact form
• Configurable Theme (Easy to change)
  • Primary Colors
  • Font
• 📚 Nuxt Layer Support

Preview

Live Demo

Table of Contents

• Nuxt 3 Starter
  • Features
  • Preview
  • Table of Contents
  • Quick Start
    • Start with this template
    • Deploy as Static Site
  • Built-in Components
  • Notes
    • Nuxt Content
    • Custom Workspace Snippets
    • Styles
    • Localization
    • Contact Form
  • License

Quick Start

For detail information, go here Getting Started

Start with this template

• This project using pnpm as package manager.
• Clone this project to your computer git clone https://github.com/renatoxm/nuxt-starter
• Install dependencies pnpm install --shamefully-hoist
• Run pnpm dev to start development server and open http://localhost:3000 in your browser

Deploy as Static Site

• Run pnpm generate to build the project
• Serve dist/ folder Checkout the deployment documentation.

Built-in Components

• Footer
• Button
• Anchor (link)
• Alert
• Card
• Action Sheet
• Theme Toggle / Switcher
• Navbar
  • Navbar Builder
  • Drawer (on mobile)
  • Options (on mobile)
• Page Layout
  • Wrapper
  • Header
    • Title
  • Body
    • Section
      • Section Wrapper
      • Section Title
• Dashboard Layout
  • Sidebar
• Contact Form
• Modal

Notes

Nuxt Content

With Nuxt Content, you can just create markdown file (recommended) inside content folder.
But this is only available for SSR (Server Side Rendering) mode. Static mode still not working, you can see the issue nuxt/content#1202 For now, you can follow

Custom Workspace Snippets

This workspace including custom snippets for VSCode.

• n3:content
  content template with markdown
• n3:page
  page template

Styles

Tailwindcss import managed by windicss. and you can add custom styles in :

/path/to/assets/sass/app.scss

Localization

This project uses nuxt/i18n to translate links and content.

To add a new language, or change default language, you need to edit nuxt.config.ts and add a new locale in locales array.

  // module::i18n
  i18n: {
    strategy: 'no_prefix',
    defaultLocale: 'en',
    langDir: 'locales',
    detectBrowserLanguage: {
      useCookie: true,
      fallbackLocale: 'en',
      redirectOn: 'root',
    },
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en.yml',
        flag: '🇺🇸',
      },
      ... add other languages here!
    ],
  },

You also need to add a locale .yml file in ./locales and also ad them in app.config.ts

locales: {
      en: {
        name: 'English',
        iso: 'en',
        flag: '🇺🇸',
      },
      ... add other locales

Contact Form

In order to use the contact form component LayoutPageContact, you need to create a .env file and add your key to it. To get the access key, visit Static Forms Website and follow the instructions. Then paste it in place of YOR_ACCESS_KEY like bellow.

# Contact form component your access key. Get yours here https://www.staticforms.xyz
ACCESS_KEY=YOUR_ACCESS_KEY

License

This project is licensed under the MIT license, Copyright (c) 2023 Renato Nabinger. For more information see the LICENSE file.