Tutorial: Dynamic content via url query parameters in Vue.js

Intro

In this short beginner-friendly tutorial I will demonstrate how to dynamically customize the contents & styling of a Vue.js page / component via url query parameters. To do so we will be building a cute little ‘invitation’ application from scratch.

The final result of this tutorial:

Recommended knowledge/tool(s)

  • Helpful but definitely not required: very basic knowledge of Vue.js, vue-cli and Vue-Router.
  • Node.js: I will be using Node.js to bootstrap the base of the application and to install dependencies. https://nodejs.org/en/download/

Motivation

Why use query parameters for dynamic content?

  • Shareable: since the customization is baked into the url, it can easily be shared with predictable results.
  • Flatness & absence of order constraint: contrary to query parameters, path parameters imply hierarchy and require a specific order.
  • Optionality: with path parameters there is no clean way to omit values (except for the last one). With query parameters we can simply omit any parameter we want.

What we’ll be building

A one-page app inviting the reader to sign up for ‘Nappie’: a fictional diaper subscription service.

Requirements:

  • If the name of the invited person is supplied then it should be included in the greeting. Query param example: ‘to=John’.
  • We want to display a customized message based on whether the baby was already born or not. Query param example: ‘stage=belly’ or ‘stage=baby’.
  • We want to be able to specify the color of the background of the invitation. Query param example ‘bg=FFD2E8’ (we omit the hex value’s # for technical reasons).
  • The invitation must be presentable even if no parameters are supplied.
Mockup made with Balsamiq Mockups (11/10 much recommended)

Let’s build!

Creating a base application with vue-cli

We will use vue-cli: a simple CLI for scaffolding Vue.js projects.

$ npm install -g vue-cli

Our template of choice will be webpack-simple.

$ vue init webpack-simple nappie

Once the template has downloaded:

$ cd nappie
$ npm install

Once all dependencies are installed you can run the following command to start a local development server:

$ npm run dev

Creating the ‘Invitation’ component

The invitation view will be declared in its own component.

In the root folder, create a new file: ‘Invitation.vue’ with the following content:

We can test our component and its props by modifying App.vue:

Which should result in the following:

Integrating Vue-Router and setting component props with query parameters

To easily access query parameters and inject them into our component we will be adding Vue-Router.

$ npm install vue-router --save --dev

Edit main.js:

And finally, adapt App.vue:

(<router-view></router-view> is where our component will be rendered)

That’s all folks

Hope this was helpful. Feedback of any kind is always appreciated, don’t be shy!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.