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>

Even if you are not using SDP, the Ripple Framework documentation is a good starting point for any Nuxt development using Ripple.


Propose a change to this page on GitHub.