vincentdigital / ripple

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

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

Documentation Site »

Storybook · Reference Ripple site

Table of Contents

• About the Project
  • Built With
• Usage
  • In a Nuxt application
  • In a Vue project
• Contributing
  • Getting Started
  • Requirements
  • Installation
  • Example app
  • Storybook
• Usage
• Support
• License
• Attribution

About The Project

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

Built With

• Vue
• Nuxt
• Storybook

Usage

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.

In a Nuxt application

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

With Tide

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.

Without 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.

In a Vue.js project(Not Nuxt.js)

Ripple components are published individually as npm modules and can be imported in any Vue project.

Check out our Vue app example.

Contributing

Please see CONTRIBUTING.md first.

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

Requirements

• Install nodejs (^v10.0.0)
• Install yarn (currently npm is unsupported)

Install

Run yarn install

Running Example Application

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

Running Storybook

Run yarn run start:storybook

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.