Ripple Design System

Nuxt

How to use Ripple components with Nuxt in a non-SDP context.

First, set up access to Github Packages.

Next, install Ripple UI in your project:

npm install @dpc-sdp/ripple-ui-core --save

Ripple UI exports a nuxt module that you can add to your nuxt config, note the addition of /nuxt:

export default defineNuxtConfig({
  modules: [
    '@dpc-sdp/ripple-ui-core/nuxt'
  ]
})

In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue file):

import '@dpc-sdp/ripple-ui-core/style';
import '@dpc-sdp/ripple-ui-core/style/components';

There is no need to import the components as they will be registered globally by the nuxt module

<template>
  <RplButton variant="outlined" />
</template>

#Using in an SDP website

If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project.

For documentation on using Ripple with Nuxt in SDP sites, visit the support for SDP developers


Propose a change to this page on GitHub.