Glaze for Nuxt

An (unofficial) Glaze module for Nuxt

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-glaze

That's it! You can now use Glaze in your Nuxt app ✨

Examples (from their docs):

<div data-animate='from:opacity-0.5 to:opacity-1'></div>

<div data-animate='to:scale.x-2|scale.y-2'></div>

Configuration

You can use all settings for glaze in your nuxt.config.ts under the key glaze like so:

export default defineNuxtConfig({
  modules: [...],

  glaze: {
    // the root element which will be searched for elements
    element: document,
    // the attribute to search for
    dataAttribute: 'data-animate',
    // custom breakpoints
    breakpoints: {
      default: '(min-width: 1px)',
    },
    // defaults for animations
    defaults: {
      tl: 'ease-power2.inOut',
      element: 'to:x-500',
    },
    // custom presets
    presets: {
      helicopter: 'from:rotate-2160|duration-10',
    },
    // watch elements for changes and restart animations with new settings
    watch: false,
  },
})

Find a full list of options here: Config options for glaze

Docs

Find the full docs and examples here:

Documentation

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint