Vue Ecosystem

Thanks to its popularity, Vue has been enriched by a vast ecosystem of plugins and tools. A (long) list is available here: awesome-vue (opens new window).

Here is a selection:

• vue-devtools (opens new window) A browser extension very useful for debugging Vue applications. Available on Chrome, Firefox or standalone application.

• Vue Styleguide (opens new window) A style guide maintained by the official team to list conventions and best practices around Vue projects.

• vue-axe (opens new window) An audit tool for checking the accessibility of your Vue applications. It indicates in the developer console the list of accessibility issues identified in your application.

• vuepress (opens new window) A documentation site builder using Vue (used for this website)

UI Frameworks

There are many UI frameworks out there with a large number of predefined and already styled components, supposed to meet all your interface needs.

• Vuetify (opens new window)
• Quasar (opens new window)
• Vue-material (opens new window)
• buefy (opens new window)
• vue-sax (opens new window)

WARNING

A UI Framework does not replace the work of a designer, ergonomist or CSS developer.

Server-side rendering

Server-side rendering (SSR) consists of replacing traditional front-end servers (Apache / nginx) with JS interpreters (most often Node.js) that will run Vue on the back-end and generate pages on the server side. This helps support clients that have JavaScript disabled, improves search engine indexing, and can improve initial rendering performance.

Nuxt (opens new window) is the SSR framework of reference for Vue.js. It provides routing based on the source files and directories, and provides a seamless switch between server-side rendering and client-side taking control after initial render.

End of exercises - do what you want

• Test some tools that interest you
• Using the UI framework of your choice, beautify your web application 😃