Dynamic wireframe: Vue.js + Vuetify
Vue.js is one of the popular JS frameworks being used today to build progressive web applications. Combined with Vuetify, a Material Design framework for Vue.js, you can create responsive web applications in no time. The best thing about Vuetify is that you don’t need to spend a lot of time just to create a working and stylish web application. This is especially helpful if you need to create a prototype front-end application to consume your APIs you created in your back-end applications.
In Vuetify, you can create wireframes, which are templates for consistent layout of the application. There are cases where you want to use more than one wireframes. This article will show you how to implement the use of multiple wireframes.
For more information on the Vuetify wireframes, you may refer to: https://vuetifyjs.com/en/getting-started/wireframes/#examples
If you need to see the application now, check the links below. Otherwise, you may want to see the explanation in the next section.
— The sample web application is deployed in Netlify:
https://distracted-agnesi-bd0c20.netlify.app/#/
— The complete code is stored in Github:
The ‘dynamic_wireframe’ app introduces the following concepts:
- Vuetify components
- Dynamic binding
- Vuex
- Vue router
Here is the sample wireframe/layout switch in action using the Netlify link provided earlier:
Steps
1. Save wireframes as .vue files
In your Vue project, create a new folder ‘layout’ and create .vue files that correspond to the wireframes from Vuetify. The link to Vuetify wireframes was already provided above.
Example: https://github.com/alvinlucillo/dynamic_wireframe/tree/master/src/layout
2. Modify App.vue
- Import the wireframe .vue files
- Create the
layout()computed method and return the ‘layout’ state (we’ll get to the state management later). The layout method, which can be referred as layout only without the parentheses, gets triggered and returns the value every time the value changes (i.e., reactive) - Assign a layout name to each layout (e.g., DiscordLayout) in components object. Layout name will be used to identify which layout to be displayed
- Use the <component> element the “is” special attribute to allow dynamic components based on the value of the computed method ‘layout’
3. Modify ./store/index.js
- Vuex, a state management library of Vue.js, was used to handle the layout values so that only one layout value is maintained throughout the application
- By default, the layout is baseLayout so that every page load, there is already a wireframe in use
- setLayout is used to modify the value of the ‘layout’ state
4. Create the layout switcher: ./components/Switch.vue
- This is just a sample implementation on how to switch to different layout
- The template creates a dropdown list of layout values and the button to set call ‘setLayout’, a Vuex method, to update the layout state’s value, which in turn will change the wireframe.
5. Modify ./router/index.js
- Use the layout switcher,
Switch.vue, in the component object so that every time the root (‘/’) is accessed, the switcher is always available to whatever layout is currently rendered
6. Modify each wireframe .vue file to render the switcher
- Place this inside the v-main element:
<router-view></router-view> - router-view renders the component object from
./router/index.js - See the example from Base.vue: https://github.com/alvinlucillo/dynamic_wireframe/blob/master/src/layout/Base.vue
