@paper-ui/nuxt

@paper-ui/nuxt is a component library for Nuxt.js that aims to create a "hand-drawn" aesthetic for your UI. With this library, you can build interfaces using components with a unique and artistically crafted style.

Links

• ✨ Demo
• 📖 Documentation
• 📦 NPM Package
• 🌍 Nuxt Module Page

Installation

To install the module in your Nuxt.js project, use one of the following commands:

npx nuxi@latest module add paper-ui

npm install @paper-ui/nuxt

pnpm add @paper-ui/nuxt

Usage

After installing the module, add it to your nuxt.config.js file:

export default defineNuxtConfig({
  modules: [
    '@paper-ui/nuxt'
  ]
})

Now you can use the components provided by the library in your pages and Vue components.

Example Usage

<template>
  <PUButton>Click Me!</PUButton>
</template>

Scripts

Here are some useful scripts available during development and maintenance of the module:

• dev: Starts the development environment with the Nuxt Playground.
• dev:build: Builds the Playground environment for testing.
• dev:prepare: Prepares the development environment using nuxt-module-build.
• release: Prepares for release by running tests, linting, and publishing the module.
• lint: Runs ESLint to check code quality.
• test: Runs tests using Vitest.
• test:watch: Watches for changes and runs tests automatically.
• test:types: Checks TypeScript types.

Dependencies

• @nuxt/kit: Core module for Nuxt 3.
• @nuxtjs/tailwindcss: Integration with Tailwind CSS.

Development

During development, you can test the module locally using the included Playground. The development environment allows you to see how components behave as you make changes.

Running the Playground

Run the following command to start the Playground in development mode:

npm run dev

Or, if you're using pnpm:

pnpm dev

This will start the Nuxt development server, allowing you to preview the components in action.

License

This module is licensed under the MIT License.

Changelog

• ✨  Release Notes