Make Vue.js development easier on Windows
When developing for Vue on Windows, there are things you can do to speed up your workflow. I’m going to outline one of these below.
One of the things we can do to speed up our workflow, is to create a shortcut in our ‘New File’ context menu, for creating Vue components. When this context menu shortcut is used, it will create a .vue component file with the following structure:
<template>
</template>
<script>
export default {
name: '',
components: {
},
props: {
},
watch: {
},
methods: {
},
computed: {
},
data () {
return {
}
},
mounted () {
},
detroyed () {
}
}
</script>
<style lang="scss">
</style>This file structure can be changed. You can remove the ‘scoped’ on the style tag or adjust the default language as required however, with SCSS being the most common and what I use, I have set mine to SCSS.
The first task we have to do, is add the template to our file system. The templates for new files reside in %SYSTEM_DRIVE%/Windows/ShellNew.
If the above folder is missing, just go ahead and create it.
Once you’re inside of this folder, create a file named ‘Vue.vue’. This is going to be our template file, so you can either go ahead and copy & paste the code above, or put your own default code in here.
Once this is done, we need to add this template to our context menu. Before doing so, ensure that ‘.vue’ files have a default program to open with, otherwise the context menu link will not be visible.
To add our link to the context menu, create a temporary file named ‘vue-context-shortcut.reg’. Inside of this file, put the following:
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\.vue]
@=”vue_auto_file”
[HKEY_CLASSES_ROOT\.vue\ShellNew]
“FileName”=”VueComponent.vue”
[HKEY_CLASSES_ROOT\vue_auto_file]
@=”Vue Component”Save and run the file, allowing any administrative prompts that may be displayed. Once you have ran the file, feel free to delete it as it’s no longer needed.
Now, presuming you have followed these instructions, you should now have ‘Vue Component’ in your ‘New’ context menu in Windows. As I mentioned earlier, please ensure that you have a default program associated with ‘.vue’ files, otherwise the context menu item will not show.
