Nuxt and Morpheme UI Starter

Quickly get started on a new project with Nuxt and Morpheme UI.

What's Included?

• ✅ UI Library with Morpheme UI
• ✅ CSS Utilities by Tailwind CSS
• ✅ State Management with Pinia
• ✅ Vue Composables with VueUse
• ✅ Component Workshop with Storybook
• ✅ Google Font with @nuxtjs/google-fonts
• ✅ Font metric overrides to reduce CLS @nuxtjs/fontaine
• ✅ Internalization with @nuxtjs/i18n
• ✅ Image optimization with @nuxt/image-edge
• ✅ Coding style with Conventional Commits and lint-staged
• ✅ Component generator with Hygen

Directory Structure

Look at the Nuxt directory structure documentation.

Create New Project

With Morpheme CLI

The best way to create a new project with this template is using create-morpheme-app:

npx create-morpheme-app@latest

Then, choose Nuxt Starter template.

With nuxi

You can also easily create a new project from this template using nuxi:

npx nuxi init -t gh:gitsindonesia/nuxt-starter my-app
cd my-app
yarn
yarn dev

Usage as Nuxt Layer

First, install the package:

# with npm
npm i @morpheme/nuxt-starter

# with yarn
yarn add @morpheme/nuxt-starter

# with pnpm
pnpm add @morpheme/nuxt-starter

Then, add @morpheme/nuxt-starter to the extends block.

export default defineNuxtConfig({
  extends: [
    '@morpheme/nuxt-starter'
  ]
})

Checklist

Some tasks you should probably do in the beginning are:

• replace this generic README with a more specific one
• reset this package.json version to 0.0.0
• install the Vue Volar extension
• enable Volar takeover mode to ensure a smooth editor setup
• copy .env.example to .env and update the value with your own
• remove or update .github workflows
• remove default landing page app
  • remove _landing folder
  • remove ./_landing from extends block in nuxt.config.ts

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

Release Guide

First, bump the version and generate a changelog with standard-version:

yarn release

You can also bump to a specific version using the semantic version.

# Major release. E.g. from 1.0.0. to 2.0.0
yarn release --release-as=major

# Minor release. E.g. from 1.1.0. to 1.2.0
yarn release --release-as=minor

# Patch release. E.g. from 1.0.0. to 1.0.1
yarn release --release-as=patch

# Pre-release release. E.g. from 1.0.0 to 2.0.0-alpha.1
yarn release --release-as=prelease

Then, push the tags:

git push --follow-tags

Contributing

To contribute, you may follow these steps:

• Clone this repository.
• Create a branch: git checkout -b <branch_name>.
• Make your changes and commit them: git commit -m '<commit_message>'
• Push to the original branch: git push origin <branch_name>
• Create the pull request.

License

MIT