Vxe UI Nuxt

Vxe UI module for Nuxt

Features

• Automatically import components and styles on demand.

Installation

npm install vxe-pc-ui-nuxt -D

Configuration

export default defineNuxtConfig({
  modules: [
    'vxe-pc-ui-nuxt'
  ],
  vxeBaseSetting: { /** Options */ }
})

Usage

<template>
  <div>
    <vxe-form :data="formData" @submit="submitEvent">
      <vxe-form-item title="名称" field="name" span="12" :item-render="{}">
        <template #default>
          <vxe-input v-model="formData.name"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="角色" field="role" span="12" :item-render="{}">
        <template #default>
          <vxe-input v-model="formData.role"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="年龄" field="age" span="12" :item-render="{}">
        <template #default>
          <vxe-input v-model="formData.age"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item align="center" span="24" :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary">提交</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
export default {
  data() {
    const formData: {
      name: '',
      nickname: '',
      sex: '',
      role: '',
      age: ''
    }
    return {
      formData
    }
  },
  methods: {
    submitEvent () {
      console.log('保存成功')
    }
  }
}
</script>

Reference Nuxt documentation and playground use.

Development

• Run npm run update i to install the dependencies.
• Run npm run run to start playground in development mode.
• Run npm run build to build this project.