nuxt-float-label

Development
749 4
vue vue3 nuxt nuxt3 float label nuxt float label vue float label input label input placeholder
Install
npm install nuxt-float-label
Latest Version:0.1.3
Vue:3
License:MIT
Last Updated:Mar 15, 2023
Links: GitHub  ·  npm
Maintainer: lucassimines

Nuxt Float Label

Nuxt Float Label

Developed by FMCX.

Downloads NPM

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
  1. 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

Related Packages

@nathanchase/nuxt-dayjs-module

This is a Nuxt 3 compatible module built with the official Nuxt 3 (module-builde...

19,376 31
nuxt nuxt3 dayjs
cap-socket

Functions developed by Cap to establish real-time and persistent communication w...

968
nuxt nuxt3 cap-socket
@brc-dd/nuxt-i18n

Minimal module for i18n with locale auto-imports & localized routing

898 12
nuxt nuxt3 i18n
@unocss/nuxt

Nuxt module for UnoCSS

3,181,743 18,982
nuxt nuxt3 nuxt-module unocss
nuxt-vercel-analytics

Nuxt module to integrate Vercel Analytics

12,952 22
nuxt nuxt3 analytics vercel

Version History

Version Released Vue License
0.1.3 ^3.0 MIT
0.1.2 ^3.0 MIT
0.1.1 ^3.0 MIT
0.1.0 ^3.0 MIT