Migration Guide ​

1.0.0-beta.9 ​

Introducing the morpheme theme - a new addition based on the Morpheme Design System. Enhance your platform's aesthetics and usability. Visit our themes page for more information.

1.0.0-beta.6 ​

BREAKING CHANGE: nuxt option renamed from gitsUi to morpheme

export default defineNuxtConfig({
  modules: ['@morpheme/nuxt'],
  gitsUi: {}, 
  morpheme: {}, 
});

export default defineNuxtConfig({
  modules: ['@morpheme/nuxt'],
  gitsUi: {}, 
  morpheme: {}, 
});

From GITS UI to Morpheme UI (1.0.0-beta.5) ​

Package namespace has been renamed from @gits-id/* to @morpheme/*. With the exception for Nuxt module is now @morpheme/nuxt instead of @morpheme/ui-nuxt.

Here are full list of component changes:

How to upgrade ​

Basically just rename all @gits-id/* dependencies to @morpheme/* in your package.json:

Change @gits-id/ui to @morpheme/ui:

{
  "dependencies": {
    "@gits-id/ui": "^1.0.0-beta.4" 
    "@morpheme/ui": "^1.0.0-beta.5" 
  }
}

{
  "dependencies": {
    "@gits-id/ui": "^1.0.0-beta.4" 
    "@morpheme/ui": "^1.0.0-beta.5" 
  }
}

For Nuxt user, change @gits-id/ui-nuxt to @morpheme/nuxt:

{
  "dependencies": {
    "@gits-id/ui-nuxt": "^1.0.0-beta.4" 
    "@morpheme/nuxt": "^1.0.0-beta.5" 
  }
}

{
  "dependencies": {
    "@gits-id/ui-nuxt": "^1.0.0-beta.4" 
    "@morpheme/nuxt": "^1.0.0-beta.5" 
  }
}

Then, change the Nuxt module usage in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@gits-id/ui-nuxt', 
    '@morpheme/nuxt', 
  ],
});

export default defineNuxtConfig({
  modules: [
    '@gits-id/ui-nuxt', 
    '@morpheme/nuxt', 
  ],
});

Then, run install the dependencies:

# with NPM
npm install

# with Yarn
yarn

# with PNPM
pnpm install

# with NPM
npm install

# with Yarn
yarn

# with PNPM
pnpm install

Then, update import usage from @gits-id/* to @morpheme/ui:

<script setup lang="ts">
import Icon from '@gits-id/icon'; 
import Icon from '@morpheme/icon'; 

import {VBtn} from '@gits-id/ui'; 
import {VBtn} from '@morpheme/ui'; 
</script>

<template>
  <div>...</div>
</template>

<script setup lang="ts">
import Icon from '@gits-id/icon'; 
import Icon from '@morpheme/icon'; 

import {VBtn} from '@gits-id/ui'; 
import {VBtn} from '@morpheme/ui'; 
</script>

<template>
  <div>...</div>
</template>

Then, also update your Tailwind Config reference:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // more code...
  content: ['./node_modules/@gits-id/**/src/**/*.{vue,js,ts,jsx,tsx,css}'], 
  content: ['./node_modules/@morpheme/**/src/**/*.{vue,js,ts,jsx,tsx,css}'], 
  // more code...
  presets: [require('@gits-id/tailwind-config/preset')], 
  presets: [require('@morpheme/tailwind-config/preset')], 
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  // more code...
  content: ['./node_modules/@gits-id/**/src/**/*.{vue,js,ts,jsx,tsx,css}'], 
  content: ['./node_modules/@morpheme/**/src/**/*.{vue,js,ts,jsx,tsx,css}'], 
  // more code...
  presets: [require('@gits-id/tailwind-config/preset')], 
  presets: [require('@morpheme/tailwind-config/preset')], 
};

0.11.0...0.11.2 ​

Features ​

• New Icon component. Registered globally as v-icon.
• Drop vue-remix-icons in favor of new Icon component.
• Nuxt: Transpile dependency automatically for better SSR support

How to upgrade ​

Bump @morpheme/ui or @morpheme/ui-nuxt (for Nuxt 3) version to latest ^0.11.2 and run yarn install or npm install

Vue:

{
  "dependencies": {
    "@morpheme/ui": "^0.11.2"
  }
}

{
  "dependencies": {
    "@morpheme/ui": "^0.11.2"
  }
}

Nuxt:

{
  "dependencies": {
    "@morpheme/ui-nuxt": "^0.11.2"
  }
}

{
  "dependencies": {
    "@morpheme/ui-nuxt": "^0.11.2"
  }
}

v0.10.5 ​

BREAKING CHANGE ​

Since v0.10.5, in order add SSR Support, VEditor must be imported from @morpheme/editor.

To upgrade, change VEditor import from @morpheme/ui to @morpheme/editor.

import {VEditor} from '@morpheme/ui/editor'; 
import {VEditor} from '@morpheme/editor'; 

import {VEditor} from '@morpheme/ui/editor'; 
import {VEditor} from '@morpheme/editor'; 

Optimizing bundle size

To optimize bundle size of VEditor you can code-split the component using defineAsyncComponent:

<script setup lang="ts">
  import {defineAsyncComponent} from 'vue';

  const VEditor = defineAsyncComponent(() => import('@morpheme/editor'));
</script>

<template>
  <VEditor name="content" />
</template>

<script setup lang="ts">
  import {defineAsyncComponent} from 'vue';

  const VEditor = defineAsyncComponent(() => import('@morpheme/editor'));
</script>

<template>
  <VEditor name="content" />
</template>

v0.10.4 ​

• As of an experimental SSR support, change VEditor import from @morpheme/ui to @morpheme/ui/editor.

import {VEditor} from '@morpheme/ui'; 
import {VEditor} from '@morpheme/ui/editor'; 

import {VEditor} from '@morpheme/ui'; 
import {VEditor} from '@morpheme/ui/editor';