@nanta/ui

nanta-ui

Ant-design based UI framework. Docs.

Features

• Schema-style form/table design.
• Light-weight ui component library.
• Typescript support.
• Support vue 3 and nuxt 3 (SSR support).
• Vite support.
• I18N support (Default 'en').

Deps

• Vue 3.0
• ant-design-vue
• Lodash
• vue-i18n

Setup

1. Install nanta-ui

yarn add @nanta/ui
yarn install

2. Configure

• Vue 3 framework
  Install Antd plugin in main.ts

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { setupNanta } from '@nanta/ui';
import '@nanta/ui/dist/style.css';
const app = createApp(App);
setupNanta(app);
app.use(Antd).mount('#app');

Here is an example in docs, and another example nanta-ui-vue:

yarn docs

• Nuxt 3 framework
  Auto-install Antd plguin, create nantaui.ts in <projectDir>/plugins/ with the following boilerplate:

// plugins/nantaui.ts
import { defineNuxtPlugin } from '#app';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { setupNanta } from '@nanta/ui';
import '@nanta/ui/dist/style.css';

export default defineNuxtPlugin(nuxtApp => {
  setupNanta(nuxtApp.vueApp);
  nuxtApp.vueApp.use(Antd)
})

Here is an exmple nanta-ui-nuxt

• Nuxt 3 Module setup (recommended)
  The simplest way to setup nanta in Nuxt env. Your can use nanta module.

yarn add @nanta/nuxt-nanta
yarn install

And add nanta module to nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nanta',    
  ],
})

Notice

This project still in alpha stage, you can try it in non-production environment.

How to dev

1. build package

yarn package

2. test pkg in local

yarn pack  # pack local
npm install nanta-ui-v0.1.0-alpha.1.tgz  # install local

3. publish to npm Remove nanta-ui && local deps befor publish it.

npm publish --access public