IceWhale Vue3 WebUI Template

Vite + Vue3 + TypeScript + ZexUI + UnoCSS + Wujie

This template should help get you started developing with Vue 3 and TypeScript in Vite.

ZexUI (with PrimeVue) and UnoCSS are also pre-built to accelerate UI development.

Uses the Wujie framework to allow WebApp to run independently or embedded in any WebUI project. Including CasaOS and ZimaOS.

Plugins for UnoCSS, Iconify and ESLint have been configured to enhance the development experience.

The template uses Vue 3 <script setup> SFCs , check out the script setup docs to learn more.

Usage

degit Template

The recommended package manager is pnpm

pnpx degit IceWhaleTech/vue3-webui-template my-project

cd my-project
pnpm i

Recommended IDE Setup

VS Code

• Workspace (Recommended):
  1. Rename vue3-webui.code-workspace to my-project-name.code-workspace
  2. Open my-project-name.code-workspace
• Settings:
  • Follow the my-project-name.code-workspace settings (recommended)
  • Copy vue3-webui.code-workspace settings section to .vscode/settings.json
• Extensions:
  1. Disable
  • Non-essential Extensions (Recommended)
  2. Install all recommended extensions
  • From vue3-webui.code-workspace (recommended)
  • From .vscode/extensions.json

Features

Base Framework

• Vite
  • @vitejs/plugin-vue 📖
  • @vitejs/plugin-vue-jsx 📖
  • @intlify/unplugin-vue-i18n 📖
  • unplugin-icons (autoInstall enabled) 📖 🎭
  • unplugin-auto-import 📖
  • unplugin-vue-components 📖
  • unplugin-turbo-console 📖
• Vue3
  • @vueuse/core 📖
  • vue-i18n 📖
  • vue-router 📖
• TypeScript

UI Framework

• ZexUI 📖 📦
  • PrimeVue 📖
• UnoCSS (📖, Taiwind 📖)
  • preset-zex 📦
    • ZexUI Colors 📖
    • presetUno 📖
    • presetIcons 📖 🎭
      • Recommended Format: i-pkg-name:icon-name
      • autoInstall enabled
      • icewhale-icons-json included as iw
    • presetTypography 📖

Micro Frontend

• Wujie 📖

Developer Experience

• VSCode
  • extensions.json
  • .code-workspace
• ESLint
  • antfu/eslint-config 📖