Productivity in Vue — Part 2
If you haven’t read Part 1, you can check it out here.
🔁 Reusable configurations
The new vue-cli-3 library has removed the need to maintain complex build patterns and configs. Instead, it allows the developer to focus on creating. It also has less known functionality that can drastically increase your effectiveness. If you do not have vue-cli-3 installed and want to follow-along, you can install it by running:
One of the unsung heroes of the cli is remote presets. These allow you to define an explicit set of plugins and their options when generating a new Vue project. You can even explicitly set versions of these plugins to further define functionality. If you’ve used vue-cli-3 in any capacity, you’ve probably come across this when creating a new app:
Within the Manually select features option, you are provided with a list of packages that can be pre-installed with your new application. For the purpose of this article, I’ll select some standard configuration options such as vue-router and vuex, then proceed to the next prompts.
After the prompts are complete, vue-cli will ask you if you want to save this preset for future projects. This is very useful when you find yourself creating multiple applications and know what options you want for each install.
When you save a configuration as a preset, it will be available the next time you run vue create.
From this point, our application goes on to install dependencies and we are left with a ready to go Vue app. But what about the preset? Let’s take a look at the .rc file that the cli created. This will belocated in your home directory and is called .vuerc.
Today we are going to take this configuration to build out our own custom preset that can remotely configure any new project we work on.
📦 Creating a preset
Let’s create a new folder called my-preset and copy over the standard config into a file called preset.json. You might have noticed above that the cli-plugin-eslint had configuration options passed to it. Because all vue-cli-3 plugins use inquire for user responses, we can provide it with the options before hand and skip the prompts.
If you navigate to the vue-cli-3 repository and navigate to the available packages, you will find all the above plugins in the @vue directory.
Each package has a list of options that we can plugin defaults for. First, let’s hookup the vuetify-cli-plugin. Opening up the prompts.js file will reveal all available options that we can pre-configure under plugins. Lets add these options into the preset:
At this point any cli-plugin that you want to add can be done by adding a new property under plugins and researching the available options you want to configure.
🔌 Creating a plugin
This will be a very simple implementation of a vue-cli-3 plugin. For a more advanced walk through, please visit the official documentation.
Depending upon your setup, you may have existing features within your application that you would like to automate with vue-cli. This can be done without creating an explicit package but let’s imagine that you’d like it to be discover-able by the@vue/cli-service and publicly available to other developers.
Create a new project with the name vue-cli-plugin-<your plugin name>.
For this plugin, we want to change our application’s eslint configuration by adding eslint-config-vuetify. To do this we are going to create a generator file that tells vue-cli to add a new package and update the eslint config. For all my projects I use eslint-config-vuetify and I’d like to bootstrap that into my projects.
Here I’m setting up a basic package extension. Generator files are expected to export a function and provide access to modify a projects files. This function tells the cli to add a the eslint config as a dependency and then update the projects config.
After publishing to npm, vue-cli can now pickup the package for others to use! Let’s go back and update our preset with the new plugin.
It’s now time to take our application for a spin. We can create a new project by telling vue to use a preset.
And voila! One line and we have a reusable starting point for new projects pre-configured just how we like it. If you’d like to discuss this article, feel free to reach out to me in our Discord Community.
