diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index 3aa7b323..54005550 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -6,62 +6,27 @@ body: - type: markdown attributes: value: | - **Before You Start...** - + Thanks for taking the time to fill out this bug report! This form is only for submitting bug reports. If you have a usage question or are unsure if this is really a bug, make sure to: - Read the [docs](https://radix-vue.com/) - Ask on [Discord Chat](https://chat.radix-vue.com/) - Ask on [GitHub Discussions](https://github.com/shadcn-vue/shadcn-vue/discussions) - - Also try to search for your issue - it may have already been answered or even fixed. - However, if you find that an old, closed issue still persists in the latest version, - you should open a new issue using the form below instead of commenting on the old issue. - - type: textarea - id: bug-env - attributes: - label: Environment - description: Please provide the following information about your environment. - value: | - Developement/Production OS: Windows 10 19043.1110 - Node version: 16.0.0 - Package manager: pnpm@8.6.0 - Radix Vue version: 1.0.0 - Shadcn Vue version: 1.0.0 - Vue version: 3.0.0 - Nuxt version: 3.0.0 - Nuxt mode: universal - Nuxt target: server - CSS framework: tailwindcss@3.3.3 - Client OS: Windows 10 19043.1110 - Browser: Chrome 90.0.4430.212 - render: bash - validations: - required: true - type: input - id: reproduction-link + id: reproduction attributes: - label: Link to minimal reproduction + label: Reproduction description: | - Please provide a link to a minimal reproduction of the bug. - A minimal reproduction is a CodeSandbox, CodePen, or a StackBlitz that contains the bare minimum amount of code needed to show the bug. - A minimal reproduction is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem + A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is **required**, otherwise the issue might be closed without further notice. [**Why?**](https://antfu.me/posts/why-reproductions-are-required) - This is **required** for us to be able to triage your issue in a timely manner. + To get started, you can use the StackBlitz and CodeSandbox playgrounds in shadcn-vue demos: + https://www.shadcn-vue.com/docs/components/accordion.html - Please do not just fill in a random link. The issue will be closed if no valid reproduction is provided. - placeholder: Reproduction Link - validations: - required: true - - type: textarea - id: steps-to-reproduce - attributes: - label: Steps to reproduce - description: | - How do you trigger this bug? Please walk us through it step by step. - Note that you can use [Markdown](https://guides.github.com/features/mastering-markdown/) to format lists and code. - placeholder: Steps to reproduce + or use template presets + https://vite.new + https://nuxt.new + placeholder: Reproduction validations: required: true - type: textarea @@ -73,14 +38,18 @@ body: validations: required: true - type: textarea - id: expected-behavior + id: system-info attributes: - label: Expected behavior - description: A clear and concise description of what you expected to happen. - - type: textarea - id: screenshots + label: System Info + description: Output of `npx envinfo --system --npmPackages vue,@vueuse/core,radix-vue,nuxt,shadcn-vue,shadcn-nuxt,unplugin-auto-import --binaries --browsers` + render: bash + placeholder: System, Binaries, Browsers + validations: + required: true + - type: checkboxes + id: contributes attributes: - label: Conext & Screenshots (if applicable) - description: | - If applicable, provide any additional context or screenshots of the bug. - You can drag and drop images here to add them to the issue. + label: Contributes + options: + - label: I am willing to submit a PR to fix this issue + - label: I am willing to submit a PR with failing tests diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml index 16ebaaec..9d347542 100644 --- a/.github/workflows/publish.yaml +++ b/.github/workflows/publish.yaml @@ -11,14 +11,42 @@ on: - dev paths: - 'apps/www/**' + pull_request_target: + types: + # When a created pull request from forked repo, it will be comment 'Should deploy to add label' + - opened + # When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages + - labeled + # Allows you to run this workflow manually from the Actions tab + # eslint-disable-next-line yml/no-empty-mapping-value + workflow_dispatch: + +permissions: + # default contents: read & write (in forked repos, only read) + contents: write + # default deployments: read & write (in forked repos, only read) + deployments: write + # default pull-requests: read & write (in forked repos, only read) + pull-requests: write jobs: publish: runs-on: ubuntu-latest - permissions: - contents: read - deployments: write name: Publish to Cloudflare Pages + # push event in main branch + # workflow_dispatch event + # pull_request event from not forked repo + # pull_request_target event with label "🚀request-deploy" from forked repo + if: ${{ + github.event_name == 'push' || + github.event_name == 'workflow_dispatch' || + (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false) || + (github.event_name == 'pull_request_target' && + github.event.action == 'labeled' && + github.event.pull_request.head.repo.fork == true && + contains(github.event.label.name, '🚀request-deploy')) + }} + steps: - name: Checkout uses: actions/checkout@v3 @@ -56,7 +84,7 @@ jobs: # Run a action to publish docs - name: Publish to Cloudflare Pages - uses: cloudflare/pages-action@v1.5.0 + uses: zernonia/cloudflare-pages-action@v0.0.7 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} @@ -66,7 +94,20 @@ jobs: gitHubToken: ${{ secrets.GITHUB_TOKEN }} # Optional: Switch what branch you are publishing to. # By default this will be the branch which triggered this workflow - # branch: main + branch: ${{ github.ref == 'refs/heads/dev' && 'dev' || format('refs/pull/{0}/merge', github.event.number) }} # Optional: Change the working directory workingDirectory: apps/www wranglerVersion: '3' + + - name: Remove label + if: ${{ github.event_name == 'pull_request_target' && contains(github.event.label.name, '🚀request-deploy') }} + uses: actions/github-script@v6 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + github.rest.issues.removeLabel({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + name: ['🚀request-deploy'] + }) diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..3bd3b7de --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +shell-emulator=true diff --git a/.vscode/settings.json b/.vscode/settings.json index de76ab63..4c691c48 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,8 +2,8 @@ "prettier.enable": false, "editor.formatOnSave": false, "editor.codeActionsOnSave": { - "source.fixAll.eslint": true, - "source.organizeImports": false + "source.fixAll.eslint": "explicit", + "source.organizeImports": "never" }, "eslint.validate": [ diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts index 42998819..b6cf67bd 100644 --- a/apps/www/.vitepress/config.mts +++ b/apps/www/.vitepress/config.mts @@ -3,9 +3,17 @@ import { defineConfig } from 'vitepress' import Icons from 'unplugin-icons/vite' import tailwind from 'tailwindcss' import autoprefixer from 'autoprefixer' +import { createCssVariablesTheme } from 'shiki' + +// import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers' import { siteConfig } from './theme/config/site' import ComponentPreviewPlugin from './theme/plugins/previewer' +const cssVariables = createCssVariablesTheme({ + variablePrefix: '--shiki-', + variableDefaults: {}, +}) + // https://vitepress.dev/reference/site-config export default defineConfig({ title: siteConfig.name, @@ -50,7 +58,11 @@ export default defineConfig({ srcDir: path.resolve(__dirname, '../src'), markdown: { - theme: 'css-variables', + theme: cssVariables, + codeTransformers: [ + // transformerMetaWordHighlight(), + // transformerNotationWordHighlight(), + ], config(md) { md.use(ComponentPreviewPlugin) }, diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue index 8653daa9..7620e0da 100644 --- a/apps/www/.vitepress/theme/components/ComponentPreview.vue +++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue @@ -52,7 +52,7 @@ const { style } = useConfigStore()
() async function copyCode() { - await copy(codeRef.value?.innerText ?? '') + await copy(codeRef.value?.innerText.replace(/\u00A0/g, ' ') ?? '') } diff --git a/apps/www/.vitepress/theme/components/Kbd.vue b/apps/www/.vitepress/theme/components/Kbd.vue index 7e3bd02c..55428107 100644 --- a/apps/www/.vitepress/theme/components/Kbd.vue +++ b/apps/www/.vitepress/theme/components/Kbd.vue @@ -18,9 +18,9 @@ const kbdClass = computed(() => { { variants: { size: { - xs: 'min-h-[16px] text-[10px] h-4 px-1', - sm: 'min-h-[20px] text-[11px] h-5 px-1', - md: 'min-h-[24px] text-[12px] h-6 px-1.5', + xs: 'min-h-4 text-[10px] h-4 px-1', + sm: 'min-h-5 text-[11px] h-5 px-1', + md: 'min-h-6 text-[12px] h-6 px-1.5', }, }, }, diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue index f853b49a..9dcff16c 100644 --- a/apps/www/.vitepress/theme/components/LandingPage.vue +++ b/apps/www/.vitepress/theme/components/LandingPage.vue @@ -2,6 +2,7 @@ import PageHeader from '../components/PageHeader.vue' import PageHeaderHeading from '../components/PageHeaderHeading.vue' import PageHeaderDescription from '../components/PageHeaderDescription.vue' +import PageAction from '../components/PageAction.vue' import ExamplesNav from '../components/ExamplesNav.vue' import { announcementConfig } from '../config/site' import GitHubIcon from '~icons/radix-icons/github-logo' @@ -31,7 +32,7 @@ import DashboardExample from '@/examples/dashboard/Example.vue' apps. Accessible. Customizable. Open Source. -
+ GitHub -
+
diff --git a/apps/www/.vitepress/theme/components/LinkedCard.vue b/apps/www/.vitepress/theme/components/LinkedCard.vue index 791c75ab..88c608ee 100644 --- a/apps/www/.vitepress/theme/components/LinkedCard.vue +++ b/apps/www/.vitepress/theme/components/LinkedCard.vue @@ -3,7 +3,7 @@ import { cn } from '@/lib/utils' diff --git a/apps/www/.vitepress/theme/components/PageAction.vue b/apps/www/.vitepress/theme/components/PageAction.vue new file mode 100644 index 00000000..4564c959 --- /dev/null +++ b/apps/www/.vitepress/theme/components/PageAction.vue @@ -0,0 +1,14 @@ + + + diff --git a/apps/www/.vitepress/theme/components/PageHeader.vue b/apps/www/.vitepress/theme/components/PageHeader.vue index 824c3068..72fc028c 100644 --- a/apps/www/.vitepress/theme/components/PageHeader.vue +++ b/apps/www/.vitepress/theme/components/PageHeader.vue @@ -7,7 +7,7 @@ import { cn } from '@/lib/utils' ``` -See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information. +The API is essentially the same, i.e. props and slots. See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information. +### Slots + +The slots available are [those currently supported](https://github.com/nathanreyes/v-calendar/blob/v3.1.2/src/components/Calendar/CalendarSlot.vue#L16-L28) by VCalendar, namely : + +- `day-content` +- `day-popover` +- `dp-footer` +- `footer` +- `header-title-wrapper` +- `header-title` +- `header-prev-button` +- `header-next-button` +- `nav` +- `nav-prev-button` +- `nav-next-button` +- `page` +- `time-header` + +Example using the `day-content` slot: + +```vue + + + +``` \ No newline at end of file diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md new file mode 100644 index 00000000..7b741e6d --- /dev/null +++ b/apps/www/src/content/docs/components/carousel.md @@ -0,0 +1,282 @@ +--- +title: Carousel +description: A carousel with motion and swipe built using Embla. +source: apps/www/src/lib/registry/default/ui/carousel +primitive: https://www.embla-carousel.com/api +--- + + + + + +## About + +The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library. + +## Installation + + +```bash +npx shadcn-vue@latest add carousel +``` + +## Usage + +```vue + + + +``` + +## Examples + +### Sizes + +To set the size of the items, you can use the `basis` utility class on the ``. + + + + +Example + +```vue:line-numbers title="Example" {4-6} +// 33% of the carousel width. + + + ... + ... + ... + + +``` + + +Responsive + +```vue:line-numbers title="Responsive" {4-6} +// 50% on small screens and 33% on larger screens. + + + ... + ... + ... + + +``` + +### Spacing + +To set the spacing between the items, we use a `pl-[VALUE]` utility on the `` and a negative `-ml-[VALUE]` on the ``. + + + +**Why:** I tried to use the `gap` property or a `grid` layout on the ` +CarouselContent` but it required a lot of math and mental effort to get the +spacing right. I found `pl-[VALUE]` and `-ml-[VALUE]` utilities much easier to +use. +

+You can always adjust this in your own project if you need to. + + + + + +Example + +```vue:line-numbers /-ml-4/ /pl-4/ + +``` + +Responsive + +```vue:line-numbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/ + +``` + +### Orientation + +Use the `orientation` prop to set the orientation of the carousel. + + + +```vue + + ... + +``` + +## Options + +You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information. + +```vue:line-numbers {3-6} + +``` + +## API + +### Method 1 + +Use the `@init-api` emit method on `` component to set the instance of the API. + + + +### Method 2 + +You can access it through setting a template ref on the `` component. + +```vue:line-numbers {2,5,9} + + + +``` + +## Events + +You can listen to events using the API. To get the API instance use the `@init-api` emit method on the `` component + +```vue:line-numbers {5,7-9,25} + + + +``` + +See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events. + +## Slot Props + +You can get the reactive slot props like `carouselRef, canScrollNext..Prev, scrollNext..Prev` using the `v-slot` directive in the `` component to extend the functionality. + +```vue:line-numbers {2} + +``` + +## Plugins + +You can use the `plugins` prop to add plugins to the carousel. + +```bash +npm i embla-carousel-autoplay +``` + + +```vue:line-numbers {2,8-10} + + + +``` + + + +See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins. diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md index 07e24bfc..07697e6e 100644 --- a/apps/www/src/content/docs/components/checkbox.md +++ b/apps/www/src/content/docs/components/checkbox.md @@ -40,6 +40,8 @@ import { Checkbox } from '@/components/ui/checkbox' ### Form +Please first read `vee-validate` section for [Checkbox and Radio Inputs](https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio/) + diff --git a/apps/www/src/content/docs/components/combobox.md b/apps/www/src/content/docs/components/combobox.md index 8134d38e..ad697ef9 100644 --- a/apps/www/src/content/docs/components/combobox.md +++ b/apps/www/src/content/docs/components/combobox.md @@ -1,7 +1,6 @@ --- title: Combobox -description: Autocomplete input and command palette with a list of suggestions. -component: true +description: Autocomplete input and command palette with a list of suggestions. --- diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md index cec3a907..aa42fc92 100644 --- a/apps/www/src/content/docs/components/data-table.md +++ b/apps/www/src/content/docs/components/data-table.md @@ -1,10 +1,11 @@ --- title: Data Table description: Powerful table and datagrids built using TanStack Table. +primitive: https://tanstack.com/table/v8/docs/guide/introduction --- - + ## Introduction @@ -22,9 +23,9 @@ We'll start with the basic `` component and build a complex data table -## Table of Contents +## Table of Contents -This guide will show you how to use [TanStack Table](https://tanstack.com/table/v8) and the
component to build your own custom data table. We'll cover the following topics: +This guide will show you how to use [TanStack Table](https://tanstack.com/table/v8) and the `
` component to build your own custom data table. We'll cover the following topics: - [Basic Table](#basic-table) - [Row Actions](#row-actions) @@ -49,6 +50,13 @@ npx shadcn-vue@latest add table npm install @tanstack/vue-table ``` +## Examples + +### Column Pinning + + + + ## Prerequisites We are going to build a table to show recent payments. Here's what our data looks like: @@ -108,31 +116,23 @@ Let's start by building a basic table. First, we'll define our columns in the `columns.ts` file. -```ts:line-numbers title="components/payments/columns.ts" {1,12-27} -import type { ColumnDef } from '@tanstack/vue-table' - -// This type is used to define the shape of our data. -// You can use a Zod schema here if you want. -export interface Payment { - id: string - amount: number - status: 'pending' | 'processing' | 'success' | 'failed' - email: string -} +```ts:line-numbers {1,12-27} +import { h } from 'vue' export const columns: ColumnDef[] = [ - { - accessorKey: 'status', - header: 'Status', - }, - { - accessorKey: 'email', - header: 'Email', - }, { accessorKey: 'amount', - header: 'Amount', - }, + header: () => h('div', { class: 'text-right' }, 'Amount'), + cell: ({ row }) => { + const amount = Number.parseFloat(row.getValue('amount')) + const formatted = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }).format(amount) + + return h('div', { class: 'text-right font-medium' }, formatted) + }, + } ] ``` @@ -148,7 +148,7 @@ formatted, sorted and filtered. Next, we'll create a `` component to render our table. -```ts:line-numbers +```vue:line-numbers @@ -224,7 +224,7 @@ const table = useVueTable({ Finally, we'll render our table in our index component. -```ts:line-numbers showLineNumbers{28} +```vue:line-numbers {28} -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md new file mode 100644 index 00000000..0aa8298e --- /dev/null +++ b/apps/www/src/content/docs/components/sonner.md @@ -0,0 +1,63 @@ +--- +title: Sonner +description: An opinionated toast component for Vue. +docs: https://vue-sonner.vercel.app +source: apps/www/src/lib/registry/default/ui/sonner +--- + + + +## About + +The Sonner component is provided by [vue-sonner](https://vue-sonner.vercel.app/), which is a Vue port of Sonner, originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React. + +## Installation + + + +### Run the following command + +```bash +npx shadcn-vue@latest add sonner +``` + +### Add the Toaster component + +Add the following `Toaster` component to your `App.vue` file: + +```vue title="App.vue" {2,6} + + + +``` + + + +## Usage + +```vue + + + +``` diff --git a/apps/www/src/content/docs/components/toggle-group.md b/apps/www/src/content/docs/components/toggle-group.md new file mode 100644 index 00000000..f622f630 --- /dev/null +++ b/apps/www/src/content/docs/components/toggle-group.md @@ -0,0 +1,93 @@ +--- +title: Toggle Group +description: A set of two-state buttons that can be toggled on or off. +source: apps/www/src/lib/registry/default/ui/toggle-group +primitive: https://www.radix-vue.com/components/toggle-group.html +--- + + + +## Installation + + + + + + + +## Usage + +```vue + + + +``` + +## Examples + +### Default + + + + +### Outline + + + + +### Single + + + + +### Small + + + + +### Large + + + + +### Disabled + + + + + diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md index fd3b2de9..3f5efd57 100644 --- a/apps/www/src/content/docs/installation/astro.md +++ b/apps/www/src/content/docs/installation/astro.md @@ -17,7 +17,7 @@ npm create astro@latest You will be asked a few questions to configure your project: -```txt showLineNumbers +```txt:line-numbers - Where should we create your new project? ./your-app-name - How would you like to start your new project? @@ -76,7 +76,7 @@ This will install `tailwindcss` and `@astrojs/tailwind` as dependencies and set Add the code below to the tsconfig.json file to resolve paths: -```json {2-7} showLineNumbers +```json:line-numbers {2-7} { "compilerOptions": { "baseUrl": ".", @@ -99,7 +99,7 @@ npx shadcn-vue@latest init You will be asked a few questions to configure `components.json`: -```txt showLineNumbers +```txt:line-numbers Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Astro Which style would you like to use? › Default @@ -116,15 +116,17 @@ Write configuration to components.json. Proceed? > Y/n Import the `globals.css` file in the `src/index.astro` file: -```ts {2} showLineNumbers +```ts:line-numbers {2} +--- import '@/styles/globals.css' +--- ``` ### Update astro tailwind config To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`. -```ts {3-5} showLineNumbers +```ts:line-numbers {3-5} export default defineConfig({ integrations: [ tailwind({ @@ -144,7 +146,7 @@ npx shadcn-vue@latest add button The command above will add the `Button` component to your project. You can then import it like this: -```astro {2,10} showLineNumbers +```astro:line-numbers {2,10} --- import { Button } from "@/components/ui/button" --- diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md index c97a6137..791a1f3d 100644 --- a/apps/www/src/content/docs/installation/laravel.md +++ b/apps/www/src/content/docs/installation/laravel.md @@ -25,7 +25,7 @@ npx shadcn-vue@latest init You will be asked a few questions to configure `components.json`: -```txt showLineNumbers +```txt:line-numbers Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Vite / Nuxt / Laravel Which style would you like to use? › Default diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md index bc378b3b..ff91808f 100644 --- a/apps/www/src/content/docs/installation/nuxt.md +++ b/apps/www/src/content/docs/installation/nuxt.md @@ -7,7 +7,7 @@ description: Install and configure Nuxt. ### Create project -Start by creating a new Nuxt project using `create-next-app`: +Start by creating a new Nuxt project using `create-nuxt-app`: ```bash npx nuxi@latest init my-app @@ -26,12 +26,128 @@ npm install -D typescript npm install -D @nuxtjs/tailwindcss ``` -### Install `shadcn-nuxt` module (New ✨) +### Add `Nuxt` module + +
+ + + + + Install the package below. + + ```bash + npm install -D shadcn-nuxt + ``` + + + + + + + Add the following code to `modules/shadcn.ts`. ```bash -npm install -D shadcn-nuxt +import { + defineNuxtModule, + addComponent, + addComponentsDir, + tryResolveModule, +} from 'nuxt/kit'; + +export interface ShadcnVueOptions { + /** + * Prefix for all the imported component + */ + prefix: string; + + /** + * Directory that the component lives in. + * @default "~/components/ui" + */ + componentDir: string; +} + +export default defineNuxtModule({ + defaults: { + prefix: 'Ui', + componentDir: '~/components/ui', + }, + meta: { + name: 'ShadcnVue', + configKey: 'shadcn', + version: '0.0.1', + compatibility: { + nuxt: '^3.9.0', + bridge: false, + }, + }, + async setup({ componentDir, prefix }) { + const isVeeValidateExist = await tryResolveModule('vee-validate'); + + addComponentsDir( + { + path: componentDir, + extensions: ['.vue'], + prefix, + pathPrefix: false, + }, + { + prepend: true, + } + ); + + if (isVeeValidateExist !== undefined) { + addComponent({ + filePath: 'vee-validate', + export: 'Form', + name: `${prefix}Form`, + priority: 999, + }); + + addComponent({ + filePath: 'vee-validate', + export: 'Field', + name: `${prefix}FormField`, + priority: 999, + }); + } + + addComponent({ + filePath: 'radix-vue', + export: 'PaginationRoot', + name: `${prefix}Pagination`, + priority: 999, + }); + + addComponent({ + filePath: 'radix-vue', + export: 'PaginationList', + name: `${prefix}PaginationList`, + priority: 999, + }); + + addComponent({ + filePath: 'radix-vue', + export: 'PaginationListItem', + name: `${prefix}PaginationListItem`, + priority: 999, + }); + }, +}); + +declare module '@nuxt/schema' { + interface NuxtConfig { + shadcn?: ShadcnVueOptions; + } + interface NuxtOptions { + shadcn?: ShadcnVueOptions; + } +} ``` + + + ### Configure `nuxt.config.ts` @@ -64,7 +180,7 @@ npx shadcn-vue@latest init You will be asked a few questions to configure `components.json`: -```txt showLineNumbers +```txt:line-numbers Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Vite / Nuxt / Laravel Which style would you like to use? › Default diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md index b1a512ef..314f0790 100644 --- a/apps/www/src/content/docs/installation/vite.md +++ b/apps/www/src/content/docs/installation/vite.md @@ -19,13 +19,63 @@ npm create vite@latest my-vue-app -- --template vue-ts ### Add Tailwind and its configuration -Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and `postcss.config.js` files: +Install `tailwindcss` and its peer dependencies, then generate your `tailwind.config.js` and configure `postcss` plugins -```bash -npm install -D tailwindcss postcss autoprefixer -npx tailwindcss init -p -``` + + + + + Vite already has [`postcss`](https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L78) dependency so you don't have to install it again in your package.json + + ```bash + npm install -D tailwindcss autoprefixer + ``` + + #### `vite.config` + + ```typescript {5,6,10-14} + import path from "path" + import { defineConfig } from "vite" + import vue from "@vitejs/plugin-vue" + + import tailwind from "tailwindcss" + import autoprefixer from "autoprefixer" + + export default defineConfig({ + plugins: [vue()], + css: { + postcss: { + plugins: [tailwind(), autoprefixer()], + }, + }, + resolve: {...} + }) + ``` + + + + + + + ```bash + npm install -D tailwindcss autoprefixer postcss + ``` + + #### `postcss.config.js` + + ```js + module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, + } + ``` + + + + ### Edit tsconfig.json @@ -42,6 +92,11 @@ Add the code below to the compilerOptions of your tsconfig.json so your app can Add the code below to the vite.config.ts so your app can resolve paths without error +```bash +# (so you can import "path" without error) +npm i -D @types/node +``` + ```typescript import path from "path" import vue from "@vitejs/plugin-vue" @@ -69,7 +124,7 @@ npx shadcn-vue@latest init You will be asked a few questions to configure `components.json`: -```txt showLineNumbers +```txt:line-numbers Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Vite / Nuxt / Laravel Which style would you like to use? › Default diff --git a/apps/www/src/examples/cards/components/GitHubCard.vue b/apps/www/src/examples/cards/components/GitHubCard.vue index 62c7b3a4..30450833 100644 --- a/apps/www/src/examples/cards/components/GitHubCard.vue +++ b/apps/www/src/examples/cards/components/GitHubCard.vue @@ -26,7 +26,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'