Nuxt Starter Kit

Overview:

Nuxt Starter Kit is an opinionated boilerplate based off of Nuxt3(beta), with all the necessary features and tools pre-installed. It provides a ready-to-use setup for starting a Nuxt project, allowing users to easily experiment and play with different functionalities. The kit includes features such as TypeScript integration, Tailwind CSS for quick styling, Daisy UI for pre-made TailwindCSS components, and FontSource for effortless custom font integration. It also supports icons through Unplugin, offers static code analysis with ESLint, and provides Supabase support for authentication, user profiles, and user avatars.

Features:

• Typescript: TypeScript as the language choice for enhanced development experience.
• Tailwind CSS: Quick and easy styling without needing to leave your HTML.
• Daisy UI: Pre-made TailwindCSS component classes for efficient UI development.
• Tailwind UI: Robust headless logic for components like Dialog/Modal, Dropdown, List, etc.
• FontSource: Effortless integration of custom fonts.
• Icons through Unplugin: Access to thousands of icons as components on-demand and universally.
• ESLint: Static code analysis for better code quality.
• Prettier: Code formatting to ensure consistent styles.
• Supabase support: Integration with Supabase for authentication, user profiles, and user avatars.

Installation:

To install the Nuxt Starter Kit theme, follow these steps:

1. Click on “Use this template” to create a copy of the project.
2. Once the copy is created, navigate to the project directory.
3. Run the following command to install the dependencies:

   yarn install
   

4. Set up Supabase for the project by following these steps:
   • Create an account at Supabase.
   • Create an Organization and a Project.
   • Copy the generated project’s API authentication details from https://app.supabase.io/project/<your-awesome-nuxt-project>/api/default?page=auth
   • Place the authentication details in the .env file as SUPABASE_URL and SUPABASE_KEY.
5. Execute the necessary queries to set up user profiles and user avatars in the Supabase project.
6. Start the project locally by running the following command:

   yarn dev
   

7. Open http://localhost:3000 in your browser to see the result.

Summary:

Nuxt Starter Kit is a feature-rich boilerplate for Nuxt projects. It includes all the necessary tools and features to kickstart development, such as TypeScript, Tailwind CSS, Daisy UI, and Supabase integration. By providing a pre-configured setup, the Nuxt Starter Kit allows developers to quickly start working on their projects without the need to set up everything from scratch. It offers an opinionated approach to development with the aim of enhancing productivity and providing a seamless experience for Nuxt developers.