Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js.
Table of Contents
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
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.