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.

Install & 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 rely 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

INFO

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 node_modules folder.

  1. In your Vue components (like app.vue in Nuxt.js), reference your component from your Desing 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 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