Click-to-Add Vue Component Template for VS Code

Adds "Create Vue Component" to VS Code File Explorer right-click menu

🏠 Homepage

Creates a blank Vue single file component in the folder of your choosing.

• Capitalizes component names and converts snake_case to PascalCase.
• Checks if the component name you've chosen is a known HTML tag and, if so, prepends it with Custom.
• Generates a random component name if you don't feel like coming up with one.
• Inserts component name into template.
• Checks if the file already exists so there are no accidental overwrites.
• Allows you to specify a default style language.

Template

<template>
  <div></div>
</template>

<script>
export default {
  name: '[componentName]',
  components: {},
  props: {},
  data() {
    return {}
  },
  mounted() {},
  beforeDestroy() {},
  methods: {}
}
</script>

<style lang="[styleLang]" scoped></style>

Install

Press ⇧⌘X/⇧^X and search for selfagency.vue-component-template or, from the command line:

code --install-extension selfagency.vue-component-template

Usage

Right-click on a folder in the File Explorer pane and select, or press ⇧⌘P/⇧^P and type, Create Vue Component.

You can specify a default style language (CSS, SASS, Less, Stylus, etc.) via the Settings UI or directly in settings.json:

{
  "vue-component-template.defaultStyleLang": "scss"
}

Author

👤 Daniel Sieradski daniel@self.agency

• Website: https://self.agency
• Twitter: @selfagency_llc
• GitLab: @selfagency
• LinkedIn: @selfagency

Acknowledgements

Icon by JunGSa from the Noun Project.

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!