Quickstart

Getting started with @nhtio/vuetify-fields is quick and easy. Just follow the steps below and you'll be up and running in no time.

Prerequisites

You must have Vuetify installed and configured in order to use these components

Installation

You can install @nhtio/vuetify-fields directly from your preferred package manager

npm

npm i @nhtio/vuetify-fields

pnpm

pnpm add @nhtio/vuetify-fields

yarn

yarn add @nhtio/vuetify-fields

Using

Each component is importable directly from the @nhtio/vuetify-fields module, but in order to help reduce the size of your bundle you can also import them directly from the component's own direct module:

<script setup lang="ts">
import ColorField from '@nhtio/vuetify-fields/components/fields/color'
</script>

Then you can use them the same as you would use any other component:

<script setup lang="ts">
import { ref } from 'vue'
import ColorField from '@nhtio/vuetify-fields/components/fields/color'
const example = ref(null)
</script>

<template>
  <v-app>
    <v-container>
        <ColorField v-model="example" />
        <br />
      <v-text-field v-model="example" />
    </v-container>
  </v-app>
</template>

To see it work live, check out the playground