Must-have tools for Vue.js developers

VueWeb development

Vue.js is a progressive JavaScript framework that enables web developers to create UIs in an elegant and efficient manner. Lately, it started to attract more and more attention from wider circles of the web development community.

And not without a reason – among the most prominent features of Vue are a smooth learning curve, concise programming style and high performance due to the automatic tracking of the component’s dependencies during its rendering. Besides, its core concepts are well-documented.

As the Vue.js community grows in size, so does its ecosystem of development tools. Let’s explore its best representatives in more detail.

Vue CLI

Vue CLI is a standard utility for rapid Vue.JS development. It provides your Vue app with access to the build tools and ensures they work smoothly together, allowing you to fully concentrate on bringing your ideas with code rather than on configuring the app. 

The flexible plugin system of Vue CLI supports Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Mocha, Cypress, and Nightwatch. Plus, thanks to this system, developers can share their plugins with the community.

To my mind, the greatest thing is that you can make use of various configuration and customization options to meet your project’s specific needs.

Another thing you’ll love is a mighty GUI of Vue CLI that makes creating, configuring and managing projects a lot easier. Besides, Vue CLI has out-of-the-box support of unit & end-to-end testing.

Storybook

Storybook is an open-source environment for developing, managing and testing UI components. Seamless configuring components through a flexible API is what makes it a must-have tool for building UIs efficiently. 

With Storybook, you can create awesome components and demonstrate them in an isolated environment. Since it runs outside your app, you don’t need to worry about your app’s dependencies and specific requirements. 

If you want to implement extra features for Storybook, you can try addons functionality. 

Vuetify

Vuetify is a component framework that offers a broad range of stunning UI components. All the components adhere to the principles of Material Design. You can use this framework for building mobile, server-side rendered, single page, and progressive web apps as well as for regular HTML pages.

To get familiar with everything Vuetify has to offer, browse the components, pick those you like the most and get hands-on experience with them in your app. Try one of the pre-made layouts, design your own theme or style your components with colors, spacings, typography and more. 

Another aspect I’d like to highlight is its rich ecosystem which includes a theme generator, vuetify-loader, Cognito module, and other tools. Moreover, the components are well-documented and accompanied with nice examples. 

To my mind, this framework can meet the needs of any project. Plus, you can select only specific components to be used within your app. This approach allows you to control the size of your app by making it more lightweight.

VuePress

VuePress is a static site generator tool. It offers blogging features and a plugin system. You can build custom themes and use ready-to-use community themes. 

Let me break down the essence of its work. After you write the site’s content using Markdown syntax, VuePress transforms it into static HTML files. As soon as these files are loaded, your site runs as a single page application (SPA) backed by Vue, Vue Router and Webpack. 

The main advantage of this approach is that you can include Vue code or components within Markdown files. That’s why the development comes out as flexible and you can create a website like a regular Vue app. 

VueX

VueX is a state management system for Vue apps. You can use it as a centralized store for the application’s components and define rules that ensure that states are mutated merely in a predictable manner. 

Let’s take a closer look at the structural components of VueX:

• state – an object that contains the app’s state
• getters – objects that provide methods used to access the state. They act like computed properties for stores. 
• mutations – objects that provide methods for affecting the state. Mutations may remind you of events since a mutation has a string type and a handler – a function in which we modify an actual state. 
• actions – objects that provide methods for triggering mutations and running async operations. 

Also, it’s worth to mention modules as an inevitable part of VueX. Modules may come in handy when your application starts to scale. It’s a good practice to organize your code in modules to separate the store into individual pieces and hence simplify its maintenance. Each module has its own state, mutations, actions, and getters. 

Other cool built-in features you may like are hot-reloading mutations, modules, actions, and getters during development. 

To my mind, VueX perfectly copes with shared state management. But if your application is as simple as single page application, then you most likely don’t need Vuex. You should use it if you are building a medium- or large-scale single page application and facing the problem of handling the state outside of your Vue components. 

Nuxt

Nuxt is another progressive Vue-based framework for building modern web applications. Under the hood of Nuxt, there are Vue official libraries (vue, vue-router, and vuex), and web dev tools (as webpack, PostCSS, and Babel) being used. 

With Nuxt, you can build all kinds of Vue applications – from static landing pages to sophisticated enterprise-ready ones. It has a modular ecosystem that enables you to easily connect REST and GraphQL endpoints. 

Other built-in features include server-side rendering, automatic code-splitting, ES2015+ transpilation, powerful routing system with async data and a lot more. 

To my mind, the best thing about Nuxt is that it lets you enhance the development experience by providing the functionality for making the app structured and optimized. 

To get a better idea of how Nuxt.js can be used, dive into examples and explore its API. 

If you want to contribute to its development, you are welcome to do it on its GitHub. 

Gridsome

Gridsome is a modern framework for building fast and secure websites that can be deployed to any static web host or CDN (Netflify, Amazon S3, etc). Though it’s relatively new (released in 2018), there are already a lot of adopters and followers among Vue developers. Its creators were inspired by Gatsby.js (a site generator for React). This inspiration resulted in building a similar framework but for Vue.js. 

Let me explain how it works. Gridsome generates SEO-friendly HTML files based on the data source you provide within your app. The data source can be any – Markdown, CSV, Yaml, JSON, WordPress, Drupal (any other CMS), MongoDB, Airtable, etc. After loading the content, it’s turned into a single GraphQL Data Layer that serves for centralized data management. Now you can use extract this data and use it for building and deploying your Vue application.

The use of a universal GraphQL layer for all the data sources connected to the app is what makes Gridsome so unique. Due to it, data management is greatly simplified since the GraphQL layer acts as centralized storage and can be used by any page or component. 

Another aspect I’d like to mention is a plugin ecosystem of Gridsome. You can take advantage of diverse plugins developed by the community of developers or even create your custom one. 

Other out-of-the-box features are automatic code-splitting, static file generation, dynamic and file-based routing, hot-reloading, etc. I recommend taking the time exploring all other features of the framework.  

Besides, not only it’s free but also open-source. Any contribution to the project is more than welcome since it’s a young project created and maintained by two Vue enthusiasts. 

Learn more

If you are searching for ways to improve your VueJS coding skills and deepen knowledge in its specific concepts, we recommend you to explore GitConnected – there you can find plenty of tutorials on how to build apps with VueJS.