Skip to content

Commit

Permalink
Merge branch 'v3' into fix(Link)-missing-relative-imports-linkBase
Browse files Browse the repository at this point in the history
  • Loading branch information
yeonjulee1005 authored Dec 15, 2024
2 parents 30a9e70 + 2e17fb6 commit b6d7629
Show file tree
Hide file tree
Showing 544 changed files with 40,221 additions and 15,197 deletions.
15 changes: 12 additions & 3 deletions .github/ISSUE_TEMPLATE/bug-v3.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ body:
- type: markdown
attributes:
value: |
> [!IMPORTANT]
> As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We're actively working on stabilization and welcome feedback from early adopters to improve the library.
> [!IMPORTANT]
> As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We're actively working on stabilization and welcome feedback from early adopters to improve the library.
- type: markdown
attributes:
value: |
Expand All @@ -29,11 +29,20 @@ body:
- Build Modules: `-`
validations:
required: true
- type: dropdown
id: package
attributes:
label: Is this bug related to Nuxt or Vue?
options:
- Nuxt
- Vue
validations:
required: true
- type: input
id: version
attributes:
label: Version
placeholder: v3.0.0-alpha.5
placeholder: v3.0.0-alpha.x
validations:
required: true
- type: textarea
Expand Down
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/feature-request.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ body:
label: For what version of Nuxt UI are you suggesting this?
options:
- v2.x
- v3-alpha
- v3.0.0-alpha.x
validations:
required: true
- type: textarea
Expand Down
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/question.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ body:
label: For what version of Nuxt UI are you asking this question?
options:
- v2.x
- v3-alpha
- v3.0.0-alpha.x
validations:
required: true
- type: textarea
Expand Down
6 changes: 6 additions & 0 deletions .github/workflows/ci-v3.yml
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ jobs:
- name: Prepare
run: pnpm run dev:prepare

- name: Devtools prepare
run: pnpm run devtools:prepare

- name: Lint
run: pnpm run lint

Expand All @@ -58,5 +61,8 @@ jobs:
- name: Build
run: pnpm run build

- name: Build vue fixture
run: pnpm run test:vue:build

- name: Publish
run: pnpx pkg-pr-new publish --compact --no-template --pnpm
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
.component-meta/
component-meta.*

# Nuxt dev/build outputs
.output
.data
Expand Down Expand Up @@ -25,3 +28,5 @@ logs

playground-vue/auto-imports.d.ts
playground-vue/components.d.ts
playground-vue/tsconfig.app.tsbuildinfo
playground-vue/tsconfig.node.tsbuildinfo
156 changes: 156 additions & 0 deletions CHANGELOG.md

Large diffs are not rendered by default.

74 changes: 57 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
[![nuxt-ui.png](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
[![nuxt-ui.png](https://volta.s3.fr-par.scw.cloud/nuxt_ui_social_card_531d133fa2.png)](https://ui.nuxt.com)

# Nuxt UI v3
# Nuxt UI

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Radix Vue](https://www.radix-vue.com/), [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS v4](https://tailwindcss.com/docs/v4-beta), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

## Installation
> [!NOTE]
> You are on the `v3` development branch, check out the [dev branch](https://github.com/nuxt/ui) for Nuxt UI v2.
## Documentation

1. Install the Nuxt UI v3 alpha package:
Visit https://ui3.nuxt.dev to explore the documentation.

## Installation

```bash [pnpm]
pnpm add @nuxt/ui@next
Expand All @@ -29,43 +34,78 @@ npm install @nuxt/ui@next
bun add @nuxt/ui@next
```

> [!WARNING]
> Make sure you have `typescript` installed in your dev dependencies.
### Nuxt

2. Register the Nuxt UI module in your `nuxt.config.ts`:
1. Add the Nuxt UI module in your `nuxt.config.ts`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```

3. Import Tailwind CSS and Nuxt UI in your `app.vue` or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
2. Import Tailwind CSS and Nuxt UI in your CSS:

```vue [app.vue]
<style>
```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
</style>
```

## Documentation
Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/installation/nuxt).

Visit https://ui3.nuxt.dev to explore the documentation.
### Vue

1. Add the Nuxt UI Vite plugin in your `vite.config.ts`:

```ts [vite.config.ts]
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
plugins: [
vue(),
ui()
]
})
```

2. Use the Nuxt UI Vue plugin in your `main.ts`:

```ts [main.ts]
import { createApp } from 'vue'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

app.use(ui)

app.mount('#app')
```

3. Import Tailwind CSS and Nuxt UI in your CSS:

```css [assets/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
```

Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/installation/vue).

## Credits

- [nuxt/nuxt](https://github.com/nuxt/nuxt)
- [nuxt/icon](https://github.com/nuxt/icon)
- [nuxt/fonts](https://github.com/nuxt/fonts)
- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
- [radix-vue/radix-vue](https://github.com/radix-vue/radix-vue)
- [unovue/reka-ui](https://github.com/unovue/reka-ui)
- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
- [vueuse/vueuse](https://github.com/vueuse/vueuse)

## License

Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md).
Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/next.svg?style=flat&colorA=18181B&colorB=28CF8D
Expand All @@ -75,7 +115,7 @@ Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md)
[npm-downloads-href]: https://npm.chart.dev/@nuxt/ui

[license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE.md
[license-href]: https://github.com/nuxt/ui/blob/v3/LICENSE.md

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com
6 changes: 5 additions & 1 deletion build.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,18 @@ import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
entries: [
// Include devtools runtime files
{ input: './src/devtools/runtime', builder: 'mkdist', outDir: 'dist/devtools/runtime' },
// Vue support
'./src/unplugin',
'./src/vite'
],
rollup: {
emitCJS: true
},
replace: {
'process.env.DEV': 'false'
'process.env.DEV': 'false',
'process.env.NUXT_UI_DEVTOOLS_LOCAL': 'false'
},
hooks: {
'mkdist:entry:options'(ctx, entry, options) {
Expand Down
20 changes: 16 additions & 4 deletions cli/commands/init.mjs → cli/commands/make/component.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import { resolve } from 'pathe'
import { defineCommand } from 'citty'
import { consola } from 'consola'
import { splitByCase, upperFirst, camelCase, kebabCase } from 'scule'
import { appendFile, sortFile } from '../utils.mjs'
import templates from '../templates.mjs'
import { appendFile, sortFile } from '../../utils.mjs'
import templates from '../../templates.mjs'

export default defineCommand({
meta: {
name: 'init',
description: 'Init a new component.'
name: 'component',
description: 'Make a new component.'
},
args: {
name: {
Expand All @@ -32,6 +32,10 @@ export default defineCommand({
content: {
type: 'boolean',
description: 'Create a content component (with --pro).'
},
template: {
type: 'string',
description: 'Only generate template.'
}
},
async setup({ args }) {
Expand All @@ -53,6 +57,10 @@ export default defineCommand({
const path = resolve('.')

for (const template of Object.keys(templates)) {
if (args.template && template !== args.template) {
continue
}

const { filename, contents } = templates[template](args)
if (!contents) {
continue
Expand All @@ -70,6 +78,10 @@ export default defineCommand({
consola.success(`🪄 Generated ${filePath}!`)
}

if (args.template) {
return
}

const themePath = resolve(path, `src/theme/${args.prose ? 'prose/' : ''}${args.content ? 'content/' : ''}index.ts`)
await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
await sortFile(themePath)
Expand Down
14 changes: 14 additions & 0 deletions cli/commands/make/index.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { defineCommand } from 'citty'
import component from './component.mjs'
import locale from './locale.mjs'

export default defineCommand({
meta: {
name: 'make',
description: 'Commands to create new Nuxt UI entities.'
},
subCommands: {
component,
locale
}
})
64 changes: 64 additions & 0 deletions cli/commands/make/locale.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { existsSync, promises as fsp } from 'node:fs'
import { resolve } from 'pathe'
import { consola } from 'consola'
import { appendFile, sortFile, normalizeLocale } from '../../utils.mjs'
import { defineCommand } from 'citty'

export default defineCommand({
meta: {
name: 'locale',
description: 'Make a new locale.'
},
args: {
code: {
description: 'Locale code to create. For example: en.',
required: true
},
name: {
description: 'Locale name to create. For example: English.',
required: true
},
dir: {
description: 'Locale direction. For example: rtl.',
default: 'ltr'
}
},
async setup({ args }) {
const path = resolve('.')
const localePath = resolve(path, `src/runtime/locale`)

const originLocaleFilePath = resolve(localePath, 'en.ts')
const newLocaleFilePath = resolve(localePath, `${args.code}.ts`)

// Validate locale code
if (existsSync(newLocaleFilePath)) {
consola.error(`🚨 ${args.code} already exists!`)
process.exit(1)
}

if (!['ltr', 'rtl'].includes(args.dir)) {
consola.error(`🚨 Direction ${args.dir} not supported!`)
process.exit(1)
}

if (!args.code.match(/^[a-z]{2}(?:_[a-z]{2,4})?$/)) {
consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en or en_us`)
process.exit(1)
}

// Create new locale export
const localeExportFile = resolve(localePath, `index.ts`)
await appendFile(localeExportFile, `export { default as ${args.code} } from './${args.code}'`)
await sortFile(localeExportFile)

// Create new locale file
await fsp.copyFile(originLocaleFilePath, newLocaleFilePath)
const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8')
const rewrittenLocaleFile = localeFile
.replace(/name: '(.*)',/, `name: '${args.name}',`)
.replace(/code: '(.*)',/, `code: '${normalizeLocale(args.code)}',${(args.dir && args.dir !== 'ltr') ? `\n dir: '${args.dir}',` : ''}`)
await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)

consola.success(`🪄 Generated ${newLocaleFilePath}`)
}
})
4 changes: 2 additions & 2 deletions cli/index.mjs
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
#!/usr/bin/env node
import { defineCommand, runMain } from 'citty'
import init from './commands/init.mjs'
import make from './commands/make/index.mjs'

const main = defineCommand({
meta: {
name: 'nuxt-ui',
description: 'Nuxt UI CLI'
},
subCommands: {
init
make
}
})

Expand Down
Loading

0 comments on commit b6d7629

Please sign in to comment.