Nuxt Float Label

Developed by FMCX.

Features

• Apply float labels automatically to your inputs, selects and textareas
• Works on Nuxt 3
• Fully css customizable

Quick Setup

1. Add nuxt-float-label dependency to your project

# Using npm
npm i -D nuxt-float-label

2. Add nuxt-float-label to the modules section of nuxt.config.js

{
  modules: [
    'nuxt-float-label'
  ]
}

Access the demo website.

Props

| Name | Type | Description | Required | | ----------------- | :--- | :--- | ---: | | label | String | Overrides placeholder | No | | label-class | String | Attribute a custom class to the label | No | | dispatch | Boolean | Shows float label on mount | No |

Configs

To use on nuxt.config.ts

| Name | Type | Description | | ----------------- | :--- | ---: | | useCss | Boolean | Choose to use the default css or a custom one |

Example

nuxtFloatLabel: {
    useCss: false
}

Css classes

| Name | Description | | -- | ---: | | fl-wrapper | Wrapper class | | fl-label | Label class | | fl-on-focus | Label on focus and blur event | | fl-on-input | Label on input event |