Skip to content

nantajs/nanta-ui

Repository files navigation

nanta-ui

Download Version License

Ant-design based UI framework. Docs.

index

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

Setup

  1. Install nanta-ui
yarn add @nanta/ui
yarn install
  1. 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
  1. test pkg in local
yarn pack  # pack local
npm install nanta-ui-v0.1.0-alpha.1.tgz  # install local
  1. publish to npm Remove nanta-ui && local deps befor publish it.
npm publish --access public