The Nuxt and Morpheme UI Starter is a robust boilerplate designed to accelerate the development of modern web applications using Nuxt 3. It seamlessly integrates Morpheme UI for a rich component library and Tailwind CSS for efficient styling, providing a solid foundation for building visually appealing and highly functional user interfaces. This starter kit is ideal for developers looking to kickstart their Nuxt projects with a pre-configured, feature-rich environment.
Key features include:
- UI Library: Utilizes Morpheme UI for a comprehensive set of ready-to-use components.
- CSS Utilities: Powered by Tailwind CSS for utility-first styling, enabling rapid UI development.
- State Management: Integrates Pinia for intuitive and scalable state management.
- Vue Composables: Leverages VueUse to enhance reactivity and simplify common Vue patterns.
- Component Workshop: Includes Storybook for isolated component development and documentation.
- Google Fonts: Uses @nuxtjs/fonts for easy font integration.
- Image Optimization: Implements @nuxt/image for optimized image delivery.
- Coding Style: Enforces best practices with Conventional Commits and [lint-staged].
- Data Fetching: Incorporates Vue Query for efficient server-state management.
- Form Validation: Utilizes vee-validate for robust form validation.
Getting started with this starter kit is straightforward. You can create a new project using the Morpheme CLI by running npx create-morpheme-app@latest and selecting the 'Nuxt Starter' template. Alternatively, you can use nuxi with npx nuxi init -t gh:gitsindonesia/nuxt-starter my-app, followed by cd my-app, yarn, and yarn dev to start the development server. The starter can also be used as a Nuxt Layer by installing @morpheme/nuxt-starter and adding it to your nuxt.config.ts extends block. This flexibility allows for various integration scenarios, from standalone applications to layered architectures.
For development, simply run npm run dev to start the server at http://localhost:3000. For production, npm run build compiles the application, and npm run preview allows local testing of the production build. The project also includes a release guide using standard-version for semantic versioning and changelog generation. This comprehensive setup ensures a smooth development workflow from initial setup to deployment.
