CLI
Learn how to use the cli that comes with this project.
npx ui-thing@latest
Usage: ui-thing [options] [command]
CLI for adding ui-thing components to your Nuxt 3 application
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
init [options] Initialize UI Thing in your Nuxt3 project. This will: 1. Create a tailwind.config.js file 2. Update your nuxt.config.ts file 3. Add the necessary dependencies 4.
Create a ui-thing.config.ts file with the default configuration
add [componentNames...] Add a list of components to your project.
theme Add a new theme to your project.
shortcuts Add the defineShortcuts & useShortcuts composables
to your project.
prettier Add prettier to your project.
help [command] display help for command
init
npx ui-thing@latest init
This command will initialize UI Thing in your Nuxt3 project. This will:
- Create a tailwind.config.js file
- Update your nuxt.config.ts file
- Add the necessary dependencies
- Create a ui-thing.config.ts file with the default configuration
It is recommended that you run this command in a new Nuxt 3 project before adding any components.
Usage: ui-thing init [options]
Initialize UI Thing in your Nuxt3 project. This will: 1. Create a tailwind.config.js file 2. Update your nuxt.config.ts file 3. Add the necessary
dependencies 4. Create a ui-thing.config.ts file with the default configuration
Options:
-f --force Overwrite config file if it exists. (default: false)
-h, --help display help for command
add
npx ui-thing@latest add
This command will add a list of components to your project. If no argument is passed, it will ask you to select from a list of available components.
? Choose components Select the components you want to add »
Instructions:
↑/↓: Highlight option
←/→/[space]: Toggle selection
[a,b,c]/delete: Filter choices
enter/return: Complete answer
Filtered results for: Enter something to filter
( ) Accordion
( ) Alert
( ) Alert Dialog
( ) Aspect Ratio
( ) Autocomplete
( ) Avatar
( ) Badge
( ) Breadcrumbs
( ) Button
( ) Calendar
theme
The theme command allows you to add a new theme to your project. You can visit the themes page on shadcn-vue to see the available themes.
npx ui-thing@latest theme
Running this command allows you to select a theme from the list
? Which theme do you want to add? »
> Zinc
Slate
Stone
Gray
Neutral
Red
Rose
Orange
Green
↓ Blue
prettier
The prettier command allows you to add an opinionated prettier config to your project.
npx ui-thing@latest prettier
This will create a .prettierrc file that looks like this
{
"arrowParens": "always",
"endOfLine": "lf",
"plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
"printWidth": 100,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": true,
"tailwindFunctions": ["tv"],
"importOrder": ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"]
}
It will then instal the necessary dependencies and format your code.
shortcuts
The shortcuts command allows you to add the defineShortcuts & useShortcuts composables to your project.
npx ui-thing@latest shortcuts
This will create a defineShortcuts.ts & useShortcuts.ts file in your composables directory.