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) #

1. Follow the Nuxt.js Getting Started documentation to create your Nuxt.js app
2. Add sass package 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 #

1. In your Vue components (like app.vue in 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>
   

2. Add a <style> tag to import the design system's Sass primitives and Tokens at app level:

   <style lang="scss">
   @use '@backlight-dev/john.design-system/theme/src/theme.scss';
   </style>
   

3. Finally, use your components like any other component instance:

   <template>
     <div>
       <Button outlined name="Hello Rioters 🤘" />
     </div>
   </template>
   

Resources #

• Backlight Vue.js 3 starter kit