@studio-fes/layer-base

Base Nuxt layer with shared utilities, components, and configurations for building modern web applications.

Features

🎨 Styling & Animations

• UnoCSS: Utility-first CSS framework with Wind preset
• GSAP: Professional-grade animation library with custom easings

🖼️ Media Optimization

• Nuxt Image: Optimized image component with lazy loading
• Nuxt Fonts: Automatic font optimization
• Unlazy: Advanced lazy loading utilities

⚡ Developer Experience

• VueUse: Collection of Vue composition utilities
• Nuxt Scripts: Optimized third-party script loading
• TypeScript: Full type safety

Installation

npm install @studio-fes/layer-base

Usage

Extend this layer in your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['@studio-fes/layer-base']
})

What's Included

Components

<Image>

Optimized image component with lazy loading support.

<template>
  <Image :image="image" />
</template>

<Text>

Text component with interpolation support.

<template>
  <Text text="Your text here" />
</template>

Composables

useGSAP()

GSAP animation utilities with custom easings.

const { gsap } = useGSAP()

gsap.to(element, { duration: 1, x: 100 })

useLockBody()

Lock/unlock body scroll (useful for modals).

const { lock, unlock } = useLockBody()

onMounted(() => lock())
onUnmounted(() => unlock())

Utils

Custom GSAP easings and utility functions are available in utils/.

Configuration

The layer provides sensible defaults in nuxt.config.ts:

{
  modules: [
    '@unocss/nuxt',
    'gsap-nuxt-module',
    '@nuxt/image',
    '@nuxt/fonts',
    '@nuxt/scripts',
    '@unlazy/nuxt',
    '@vueuse/nuxt',
  ],
  runtimeConfig: {
    public: {
      baseUrl: 'http://localhost:3000',
      imageDomain: '',
      imageProvider: ''
    }
  }
}

Development

# Install dependencies
pnpm install

# Develop with playground
pnpm dev

# Build
pnpm build

# Lint
pnpm lint

Extending

Create a new layer that extends this one:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@studio-fes/layer-base'],
  // Your custom configuration
})

License

MIT