@studio-fes/layer-base

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

Features

$3

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

$3

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

$3

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

Installation

``bash
npm install @studio-fes/layer-base
`

Usage

Extend this layer in your nuxt.config.ts:

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

What's Included

$3

####
Optimized image component with lazy loading support.

`vue

`

####
Text component with interpolation support.

`vue

`

$3

#### useGSAP()
GSAP animation utilities with custom easings.

`typescript
const { gsap } = useGSAP()

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

#### useLockBody()
Lock/unlock body scroll (useful for modals).

`typescript
const { lock, unlock } = useLockBody()

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




$3

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

Configuration

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

`typescript
{
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

`bash


Install dependencies

pnpm install

Develop with playground

pnpm dev

Build

pnpm build

Lint

pnpm lint
`

Extending

Create a new layer that extends this one:

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

License

MIT