Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js.

Storybook

Table of Contents

• About the Project
  • Built With
  • Browser Support
• Usage
  • Use without Tide Backend
  • Use with Tide integration
• Contributing
• Support
• License
• Attribution

About The Project

Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.

It includes :

Project	Version	Description
Ripple component library packages		A reusable Vue.js component library based upon an atomic design systems. See them on Ripple storybook.
@dpc-sdp/ripple-nuxt-ui		A Nuxt.js module to add Ripple component library for Nuxt.js projects
@dpc-sdp/ripple-nuxt-tide		A Nuxt.js module to add Ripple and Tide integration for Nuxt.js projects
@dpc-sdp/create-ripple-app		Create a Nuxt.js project with Ripple and Tide integration in seconds
@dpc-sdp/ripple-test-tools		Cypress.io helper library for testing a ripple nuxt site and tide backend

Built With

• Vue
• Nuxt

Browser support

Ripple components support all modern browsers, including IE11.

Usage

Ripple components are published individually as npm packages and can be imported in any Vue project. See the List of packages.

Use without Tide Backend

Jump to Use with Tide integration if you are going to use Ripple with SDP Tide Backend

Use Ripple in Vue.js app

Check out our example Vue.js app: Vue app example.

Use Ripple in Nuxt.js(SSR) app

For users are using Nuxt.js. You can use our Nuxt module @dpc-sdp/ripple-nuxt-ui to add Ripple components library to your project. This configures @dpc-sdp/ripple-global and adds required webpack config.

Please see @dpc-sdp/ripple-nuxt-ui for details.

Learn more about Ripple configuration at packages/components/Atoms/Global/README.md

Use with Tide integration

If you are building a website with a Tide Drupal content backend, follow below installation guide.

Installation with using create-ripple-app

This is easiest way to start a new project from scratch.

npx @dpc-sdp/create-ripple-app <my-project>

Learn more at packages/create-ripple-app/README.md

Manual Installation

You also can add @dpc-sdp/ripple-nuxt-tide to an existing Nuxt.js project. This adds @dpc-sdp/ripple-nuxt-ui as a dependency, no need to add it yourself.

Please see @dpc-sdp/ripple-nuxt-tide for details of installation and configuration.

Contributing

Please see CONTRIBUTING.md first.

Ripple includes both a component explorer using Storybook and an example reference application.

Support

Digital Engagement, Department of Premier and Cabinet, Victoria, Australia is a maintainer of this package.

License

Distributed under the Apache 2.0 License. See LICENSE for more information.

Attribution

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.