Nuxt Skeleton

A skeleton & placeholder module for Nuxt 3.

Features

• Easy to build
• Customizable Component Names
• Themeable

Documentation

We're preparing the documentation and playground, it will be added soon.

Quick Setup

1. Add nuxt-skeleton dependency to your project

# Using yarn
yarn add nuxt-skeleton

# Using npm
npm install nuxt-skeleton

# Using pnpm
pnpm add nuxt-skeleton

2. Add nuxt-skeleton to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-skeleton'
  ]
})

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

Usage

We're preparing the examples, it will be added soon.

Todo

• Fully Functional Skeleton Components
• Add Examples to README.md
• Build Documentation and Playground Website

Functionalites

• Wraps, Blocks and Skeletons
• SkeletonDiv Component to Use Functional Props
• Customizable Component Names
• Animations
  • Different Types of Animations
  • Adjustable Speed of Animations
• Color Support
  • Dark and Light Mode
  • Adjustable Opacity of Animations
  • Adjustable Color of Animations
• Add Random Width Option for When Skeletons Repeats
• Allow Multiple Widths and Heights Option When Skeletons Repeats
• Configure Default Options from Module Options

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

# Release new version
npm run release

---

This software is licensed under the MIT License | @volkanakkus