Vueless Docs
ComponentsGitHubWebsite
  • Installation
    • Quick start (Vue)
    • Quick start (Nuxt)
    • Class autocompletion
    • Minimal requirements
    • Storybook docs
  • Global customization
    • General
    • Colors
    • Rounding
    • Focus Outline
    • Dark mode
    • Base Classes
    • Custom tailwind classes
  • Component customization
    • General
    • Styling
    • Conditional styling
    • Extends styling from keys
    • Nested components styling
    • Classes smart merging
    • Props defaults
    • Redefining props
    • Defining custom props
    • Internationalization (i18n)
  • Creating own components
    • Vueless file structure
    • Create new component
    • Copy existing component
  • Svg Icons
    • General usage
    • Custom icons
    • Dynamic import
    • Advanced settings
  • Helpers
    • Change settings in runtime
Powered by GitBook
On this page
  1. Creating own components

Copy existing component

If Vueless customization options are not enough for your needs, you can fully copy and modify any Vueless component.

However, use this approach only when absolutely necessary, as you will need to manually update the component after each new Vueless release.

Note: We do not provide free support for custom components.

npx vueless copy <src> <target>

# example: 
# npx vueless copy UButton CustomButton
yarn vueless copy <src> <target>

# example:
# yarn vueless copy UButton CustomButton
pnpm exec vueless copy <src> <target>

# example: 
# pnpm exec vueless copy UButton CustomButton
bunx vueless copy <src> <target>

# example:
# bunx vueless copy UButton CustomButton

The component will be created in the project's /components folder:

  • /src/components/<componentName> – for Vue

  • /components/<componentName> – for Nuxt

Last updated 2 months ago