Using your Vue3 design system on Nuxt.js
This guide will help you to use a Vue.js 3-based design system in your Nuxt.js app.
Installation and usage
Pre-requisites (in your local environment)
- Follow the Nuxt.js Getting Started documentation to create your Nuxt.js app
sasspackage to your dependencies as the design system relies on it for its styles:
$ npm install --save-dev sass
Add your design system from Backlight
Follow the standard procedure to install your design system in your local project.
Use your design system in your local project
In the following instructions, keep in mind to use the right path to your design system as set in the npm registry (e.g.
@backlight-dev/john.design-system) . Have a look at the
In your Vue components (like
app.vuein Nuxt.js), reference your component from your design system:
<script setup lang="ts"> import Button from '@backlight-dev/john.design-system/button/src/Button.vue'; </script>
<style>tag to import the design system's Sass primitives and Tokens at
<style lang="scss"> @use '@backlight-dev/john.design-system/theme/src/theme.scss'; </style>
Finally, use your components like any other component instance:
<template> <div> <Button outlined name="Hello Rioters 🤘" /> </div> </template>