Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js.
Documentation Site »
Storybook
·
Reference Ripple site
Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform. It includes :
- A reusable component library based upon an atomic design system.
- Modules for the universal rendering framework Nuxt to create websites using the Tide Drupal backend.
- Helper utilities to run UI tests on Ripple sites.
- A tool to scaffold new Nuxt projects using ripple and tide
Ripple is a monorepo which contains several packages published to NPM
@dpc-sdp/ripple-nuxt-tide - Package for integrating a Tide backend into a Ripple site. Docs: packages/ripple-nuxt-tide/README.md
@dpc-sdp/ripple-nuxt-ui - Adds Ripple component library to a Nuxt site, can be used independently of @dpc-sdp/ripple-nuxt-tide. Docs: packages/ripple-nuxt-ui/README.md
Ripple Vue component library @dpc-sdp/ripple-global - Each Ripple Vue component is published individually to NPM, See Ripple global for usage.
Ripple is primarily used to build websites using the Nuxt framework.
For examples on how to use Ripple in a Nuxt application, please refer also to the Documentation
If you are working with a Tide Drupal content backend you can add @dpc-sdp/ripple-nuxt-tide, this adds @dpc-sdp/ripple-nuxt-ui as a dependency, no need to add it yourself.
Installation
npm install @dpc-sdp/ripple-nuxt-tide OR yarn add @dpc-sdp/ripple-nuxt-tide
Add @dpc-sdp/ripple-nuxt-tide to modules key in nuxt.config.js eg:
modules: ['@dpc-sdp/ripple-nuxt-tide']
You also need to add a tide property as a configuration object. Please see @dpc-sdp/ripple-nuxt-tide for details on configuration and extending ripple-nuxt-tide.
If you are not using a Tide backend you can use @dpc-sdp/ripple-nuxt-ui to add Ripple components without the Tide dependency. This configures @dpc-sdp/ripple-global and adds required webpack config.
Installation
npm install @dpc-sdp/ripple-nuxt-ui OR yarn add @dpc-sdp/ripple-nuxt-ui
Add @dpc-sdp/ripple-nuxt-ui to modules key in nuxt.config.js eg:
modules: ['@dpc-sdp/ripple-nuxt-ui']
You can optionally pass options to @dpc-sdp/ripple-nuxt-ui by adding the ripple key to nuxt-config.js - See @dpc-sdp/ripple-nuxt-ui for details.
Ripple components are published individually as npm modules and can be imported in any Vue project.
Check out our Vue app example.
Please see CONTRIBUTING.md first.
Ripple includes both a component explorer using Storybook and an example reference application.
Run yarn install
The example application requires a working Tide Drupal installation to connect to.
Ensure a populated .env exists within the /examples/vic-gov-au/ directory.
You can use /examples/vic-gov-au/example.env as a template.
Run yarn run start:example
Run yarn run start:storybook
Digital Engagement, Department of Premier and Cabinet, Victoria, Australia is a maintainer of this package.
Distributed under the Apache 2.0 License. See LICENSE for more information.
Single Digital Presence offers government agencies an open and flexible toolkit to build websites quickly and cost-effectively.
The Department of Premier and Cabinet partnered with Salsa Digital to deliver Single Digital Presence. As long-term supporters of open government approaches, they were integral to the establishment of SDP as an open source platform.
