Ripple Design System

Vue

How to use Ripple components with Vue.

First, set up access to Github Packages.

Next, install Ripple UI in your project:

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

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 or index.js file):

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

To use a component, import it from @dpc-sdp/ripple-ui-core/vue, note the addition of /vue.

<script setup>
import { RplButton } from '@dpc-sdp/ripple-ui-core/vue';
</script>

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

Please see this example app for a basic demonstration of how to use Ripple components in a Vue app.


Propose a change to this page on GitHub.