Skip to content
This repository has been archived by the owner on Oct 7, 2023. It is now read-only.

Commit

Permalink
fix: readme
Browse files Browse the repository at this point in the history
  • Loading branch information
productdevbook committed May 24, 2023
1 parent b11082f commit fbc5f8f
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 40 deletions.
Binary file added .github/assets/naive-ui-nuxt.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed .github/assets/nuxt-bundle-template.png
Binary file not shown.
117 changes: 77 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,85 @@
# Nuxt Typescript Bundle Template
![alt text](https://github.com/huntersofbook/naive-ui-nuxt/blob/main/.github/assets/naive-ui-nuxt.png?raw=true)

![Nuxt Typescript Bundle Template](https://github.com/productdevbookcom/nuxt-bundle-template/blob/main/.github/assets/nuxt-bundle-template.png?raw=true)
# Naive UI Nuxt 3 Module
<br/>

### @huntersofbook/naive-ui-nuxt [![npm](https://img.shields.io/npm/v/@huntersofbook/naive-ui-nuxt.svg)](https://npmjs.com/package/@huntersofbook/naive-ui-nuxt)
<br/>

This is a template for creating a Typescript bundle. It is based on the [Typescript](https://www.typescriptlang.org/) compiler with the [Vite](https://vitejs.dev/) bundler.
This module huntersofbook team created.

## Features

- [x] [Nuxt](https://nuxtjs.org/)
- [x] [Typescript](https://www.typescriptlang.org/)
- [x] [Vite](https://vitejs.dev/)
- [x] [Vue](https://vuejs.org/)
- [x] [Vue Macros](https://github.com/sxzz/unplugin-vue-macros)
- [x] [ESLint](https://eslint.org/) with [Antfu's ESLint Config](https://github.com/antfu/eslint-config)
- [x] [Bumpp](https://github.com/antfu/bumpp) github changelog generator
- [x] [Vitest](https://vitest.dev/)
- [x] [Pnpm](https://pnpm.io/)
- [x] [GitHub Actions]()
- [x] [NPM Local Registry]()
- [x] [Renovate]()


## Usage
> [Naive UI](https://www.naiveui.com/en-US/light/components/button) integration for [Nuxt](https://nuxtjs.org)
- To use this template, click the "Use this template" button above.
- Clone the repository to your local machine.
- Run `pnpm install` to install the dependencies.
- Run `pnpm dev` to start the development server.
- Run `pnpm dev:build` nuxt build playground nuxt app.
- Run `pnpm dev:prepare` nuxt build playground nuxt app prepare.
- Run `pnpm build` to build the bundle.
- Run `dev:prepare` to build the bundle in watch mode.
- Run `pnpm play` to playground-nuxt app.
- Run `pnpm play:vue` to playground-vue app.
- Run `pnpm start` to start the bundle.
- Run `pnpm lint` to lint the code. (You can also run `pnpm lint:fix` to fix the linting errors.)
- Run `pnpm test` to run the tests. (You can also run `pnpm test:watch` to run the tests in watch mode.)
- Run `pnpm release` to bump the version. Terminal will ask you to select the version type. And then it will automatically commit and push the changes. GitHub Actions will automatically publish git tags. NPM local registry will automatically publish the package.

## Configuration

### Renovate
## Features

[Setup Github App](https://github.com/apps/renovate) for Renovate.
- Zero-config required
- Auto-import component and imports
- Tailwind CSS support

## Setup
```
pnpm add @huntersofbook/naive-ui-nuxt
```
```
yarn add @huntersofbook/naive-ui-nuxt
```
```
npm add @huntersofbook/naive-ui-nuxt
```
### Nuxt Config

```ts
export default defineNuxtConfig({
modules: [
'@huntersofbook/naive-ui-nuxt'
],

// Optionally, specify global naive-ui config
// Supports options that are normally set via 'n-config-provider'
// https://www.naiveui.com/en-US/os-theme/docs/customize-theme
naiveUI: {
themeOverrides: {
common: {
primaryColor: '#ff0000',
primaryColorHover: '#8b0000'
}
}
}
})
```

### Composables

```vue
<script setup lang="ts">
import { darkTheme } from 'naive-ui'
</script>
<template>
<NConfigProvider :theme="darkTheme">
<NGlobalStyle />
<div>
Nuxt module playground!
<NButton>Default</NButton>
</div>
</NConfigProvider>
</template>
```

## 💻 Development

- Clone this repository
- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10)
- Install dependencies using `pnpm install`
- Stub module with `pnpm dev:prepare`
- Run `pnpm dev` to start [playground](./playground) in development mode


## Thanks

Thanks to [@07akioni](https://github.com/07akioni), this project is heavily inspired by [naive-ui-nuxt-demo](https://github.com/07akioni/naive-ui-nuxt-demo).

Thanks to [@tobiasdiez](https://github.com/tobiasdiez), this project is inspired by some code structure.


## Sponsors
Expand All @@ -56,4 +93,4 @@ This is a template for creating a Typescript bundle. It is based on the [Typescr

## License

This project is licensed under the [MIT License](LICENSE).
MIT License © 2022-PRESENT [productdevbook](https://github.com/productdevbook)

0 comments on commit fbc5f8f

Please sign in to comment.