Tutorial: Dynamic content via url query parameters in Vue.js
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:
- 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/
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.
- 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.
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.
webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.github.com
$ 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
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!