Learn how to quickly set up our Vue component library and connect with our Figma assets.
Copy link to headline:Vue setup
Editors note
Visual idea: Decision tree to select which type of application / installation should be done (because the installation steps differ here):
- Components only (plain Vue library)
- Nuxt module
- Documentation template
- Vue Blueprint (for Schwarz internal users)
Before you begin, ensure you have a basic Vue(opens in a new tab) or Nuxt(opens in a new tab) project set up.
If you're starting from scratch, follow their official documentation to initialize your app, then return here to complete the integration.
Copy link to headline:Vue only
This is the basic setup for installing our design system in any Vue application.
Using Nuxt?
Skip ahead to the Nuxt guide for a simplified installation with our Nuxt module.
- Install the library via your favorite package manager:
- To get started, import the styles and initialize the Vue plugin. This enables global configuration, Vue Router support, and additional core features:
Copy link to headline:Nuxt users
- Simply install our Nuxt module to automate the entire configuration process:
- Register the module in your Nuxt application:
For more details, see the Nuxt module documentation.
Copy link to headline:Figma setup
Restricted access
Our Figma library is currently available exclusively to Schwarz Group employees and their official partners.
- Before proceeding, ensure you have a Figma design file ready. If you need help creating one, refer to the Figma documentation(opens in a new tab).
- To use our components and styles, add our library(opens in a new tab) to your file following the standard Figma process.
For more details, see the Figma library documentation.