@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.
Installation
To install the module in your Nuxt.js project, use the following command:
npm install @paper-ui/nuxt
Or, if you're using pnpm
:
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 usingnuxt-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.