⚡ Vue Supercharger

Language: English | 中文

Vue Supercharger is an extension designed to enhance Vue development by improving efficiency and the overall development experience. It automatically detects the Vue version in your workspace and provides corresponding features and snippets for Vue 2 or Vue 3 projects. The extension intelligently adapts to your project's needs, offering the most suitable functionality for your development workflow.

🌟 Features

• 💡 Vue Snippets: dramatically increase your coding speed and efficiency.

Vue Snippets :

Vue 3 Snippets

cr :

const foo = ref()

cro :

const foo = ref({})

cra :

const foo = ref([])

onBeforeMount:

onBeforeMount(() => {})

onMounted:

onMounted(() => {})

onBeforeUpdate:

onBeforeUpdate(() => {})

onUpdated:

onUpdated(() => {})

onBeforeUnmount:

onBeforeUnmount(() => {})

onUnmounted:

onUnmounted(() => {})

onActivated:

onActivated(() => {})

onDeactivated:

onDeactivated(() => {})

comp:

computed(() => {})

watch:

watch(foo, (newVal, oldVal) => {})

watchEffect:

watchEffect(() => {})

defineExpose:

defineExpose({})

defineOptions:

defineOptions({})

defineProps:

defineProps({})

defineEmits:

defineEmits([''])

setup:

setup(props){
}

provide:

provide('key', value)

vue :

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

<script setup lang="ts"></script>

<style scoped lang="less"></style>

Vue 2 Snippets

th:

this.

methods

methods: {
},

props

props: {
},

computed

computed: {
},

components

components: {
},

watch

watch: {
},

filters

filters: {
},

directives

directives: {
},

beforeCreate

  beforeCreate(){},

created

  created(){},

beforeMount

  beforeMount(){},

mounted

  mounted(){},

beforeUpdate

  beforeUpdate(){},

updated

  updated(){},

beforeDestroy

  beforeDestroy(){},

destroyed

  destroyed(){},

activated

  activated(){},

deactivated

  deactivated(){},

vue

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

<script>
export default {
  name: '',
  data() {
    return {}
  },
  methods: {},
}
</script>

<style scoped lang="less"></style>

📄 Usage

• In vue javascript typescript files, you can directly use the shortcut triggers to insert code snippets.
• The extension automatically selects the appropriate snippets based on the Vue version used in your project.

---

⚙️ Configuration

Vue Supercharger automatically switches between Vue versions based on your project, but you can customize the settings to match your preferences.

Settings

1. Open Settings in VSCode.
2. Search for Vue Supercharger to modify the configuration options.

---

🐛 FAQ

1. How do I switch Vue version support?

   Vue Supercharger automatically detects the Vue version in your workspace, so manual switching is usually not required. If the detection is incorrect, you can click on the Vue version in the status bar to switch.

---