shadcn-vue/apps/www/src/content/docs/installation.md
Sadegh Barati d34c620055
chore: lint and enable Volar hybrid mode (#419)
* chore: update deps

* feat: enable Volar hybrid mode

* chore: lint

* chore: build registry
2024-03-20 22:29:42 +03:30

8.9 KiB

title description
Installation How to install dependencies and structure your app.

Frameworks

Vite

Nuxt

Astro

Laravel

TypeScript

This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.

However we provide a JavaScript version of the components as well. The JavaScript version is available via the cli.

To opt-out of TypeScript, you can use the typescript flag in your components.json file.

{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "typescript": false,
  "aliases": {
    "utils": "~/lib/utils",
    "components": "~/components"
  }
}

To configure import aliases, you can use the following jsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

VSCode extension

Install the shadcn-vue extension by @selemondev in Visual Studio Code to easily add Shadcn Vue components to your project.

This extension offers a range of features:

  • Ability to initialize the Shadcn Vue CLI
  • Install components
  • Open documentation
  • Navigate to a specific component's documentation page directly from your IDE.
  • Handy snippets for quick and straightforward component imports and markup.