Nuxt Structure - Starter Template with Nuxt 3, Tailwind CSS, ESLint, Prettier, and Pinia 🚀

Welcome to Nuxt Structure, a starter template for building web applications using Nuxt 3, Tailwind CSS, ESLint, and Prettier. This template provides you with a solid foundation to kickstart your projects with a well-organized structure and pre-configured tools. Whether you're starting a new project or looking to refactor an existing one, Nuxt Structure has got you covered.

Features

• Nuxt 3: Built on the latest version of Nuxt, making use of its modern features and enhanced performance.

• Tailwind CSS: Utilizes the power of Tailwind CSS for rapid and customizable styling, enabling you to create beautiful and responsive designs with ease.

• ESLint and Prettier: Maintain code quality and consistency with automatic linting and code formatting using ESLint and Prettier.

• Pinia: State management powered by Pinia for a simple and reactive store management solution.

• Plugins and Modules:

  • @nuxtjs/tailwindcss: Seamless integration of Tailwind CSS with Nuxt.
  • @nuxtjs/eslint-module: Automatic linting and code formatting to maintain code quality.
  • @nuxtjs/google-fonts: Easily include Google Fonts in your project.
  • @nuxt/image: Optimize and deliver images efficiently for a faster user experience.
  • nuxt-icon: Simplified icon management for your application.

Getting Started

Follow these steps to get your project up and running with Nuxt Structure:

1. Clone the Repository: Start by cloning this repository to your local machine using the following command:

git clone https://github.com/barbecue/nuxt-structure.git

2. Navigate to the Project Directory: Move into the project directory:

cd nuxt-structure

3. Install Dependencies: Install the project dependencies using your preferred package manager. If you're using npm, run:

npm install

If you prefer Yarn, run:

yarn install

4. Configuration:

• Adjust the Tailwind CSS configuration in tailwind.config.js to suit your design preferences.
• Customize the Google Fonts selection in nuxt.config.js under the googleFonts module.
• The ESLint and Prettier configurations are already set up for you. You can adjust them in .eslintrc and .prettierrc.

5. Development: Start the development server and begin coding your application:

npm run dev

6. Linting and Formatting: Keep your code clean and consistent with ESLint. Run the linting process with:

npm run lint

You can also automatically fix some issues using:

npm run lint:fix

7. Building for Production: When you're ready to deploy your application, build it using:

npm run production

Contributing

Contributions are welcome and encouraged! If you find any bugs, have suggestions, or want to add new features, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Nuxt Structure - Created by barbecue - Feel free to reach out!

Enjoy building awesome projects with Nuxt 3, Tailwind CSS, ESLint, Prettier, and Pinia! 🚀