vuejs/vuejs-backend/gen-resources/liveTemplates/Vue.xml (925 lines of code) (raw):
<?xml version="1.0" encoding="UTF-8"?>
<templateSet group="Vue">
<template name="vrouter"
value="import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export const router = new VueRouter({ base: '/', mode: 'history', routes: [ { path: '/path', component: component } ] });"
description="Base for Vue Router"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vroute-named"
value="{ path: '$pathName$', name: '$routeName$', component: () => import('./$pathToComponent$'), },"
description="Vue Router route with per route code-splitting"
toReformat="true" toShortenFQNames="true">
<variable name="pathName" expression="" defaultValue=""pathName"" alwaysStopAt="true"/>
<variable name="routeName" expression="" defaultValue=""routeName"" alwaysStopAt="true"/>
<variable name="pathToComponent" expression="" defaultValue=""pathToComponent"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vaftereach"
value="router.afterEach((to, from) => { });"
description="Vue Router global guards afterEach"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vbeforeeach"
value="router.beforeEach((to, from, next) => { $next$ });"
description="Vue Router global guards beforeEach"
toReformat="true" toShortenFQNames="true">
<variable name="next" expression="" defaultValue=""next();"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vbeforeenter"
value="beforeEnter(to, from, next) { $next$ },"
description="Vue Router per-route guard beforeEnter"
toReformat="true" toShortenFQNames="true">
<variable name="next" expression="" defaultValue=""next();"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vbeforeresolve"
value="router.beforeResolve((to, from, next) => { $next$ });"
description="Vue Router global guards beforeResolve"
toReformat="true" toShortenFQNames="true">
<variable name="next" expression="" defaultValue=""next();"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vbeforerouteenter"
value="beforeRouteEnter(to, from, next) { next(vm => {${1:}}); },"
description="Vue Router component guards beforeRouteEnter"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vbeforerouteleave"
value="beforeRouteLeave(to, from, next) { $next$ },"
description="Vue Router component guards beforeRouteLeave"
toReformat="true" toShortenFQNames="true">
<variable name="next" expression="" defaultValue=""next();"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vbeforerouteupdate"
value="beforeRouteUpdate(to, from, next) { $next$ },"
description="Vue Router component guards beforeRouteUpdate"
toReformat="true" toShortenFQNames="true">
<variable name="next" expression="" defaultValue=""next();"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vscrollbehavior"
value="scrollBehavior(to, from, savedPosition) { if(savedPosition) { return savedPosition; } else { return { x: 0, y: 0 }; } },"
description="Vue Router scrollBehavior"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vstore-import"
value="import { store } from './store/index';"
description="Import vuex store into main.js"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vaction"
value="actions: { $updateValue$({commit}, $payload$) { commit('$updateValue$', $payload$); } }"
description="Vuex action"
toReformat="true" toShortenFQNames="true">
<variable name="updateValue" expression="" defaultValue=""updateValue"" alwaysStopAt="true"/>
<variable name="payload" expression="" defaultValue=""payload"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vgetter"
value="getters: { $value$: state => { return state.$value$; } }"
description="Vuex getter"
toReformat="true" toShortenFQNames="true">
<variable name="value" expression="" defaultValue=""value"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vmodule"
value="export default { state: { value: 'my value' }, getters: { value: state => { return state.value; } }, mutations: { updateValue(state, payload) { state.value = payload; } }, actions: { updateValue({commit}, payload) { commit('updateValue', payload); } } };"
description="Vuex module"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vmutation"
value="mutations: { $updateValue$(state, $payload$) { state.$value$ = $payload$; } }"
description="Vuex mutation"
toReformat="true" toShortenFQNames="true">
<variable name="updateValue" expression="" defaultValue=""updateValue"" alwaysStopAt="true"/>
<variable name="payload" expression="" defaultValue=""payload"" alwaysStopAt="true"/>
<variable name="value" expression="" defaultValue=""value"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vstore"
value="import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { $key$: $value$ } });"
description="Base for Vuex store"
toReformat="true" toShortenFQNames="true">
<variable name="key" expression="" defaultValue=""key"" alwaysStopAt="true"/>
<variable name="value" expression="" defaultValue=""value"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vstore2"
value="export const state = () => ({ value: 'myvalue' }) export const getters = { getterValue: state => { return state.value } } export const mutations = { updateValue: (state, payload) => { state.value = payload } } export const actions = { updateActionValue({ commit }) { commit('updateValue', payload) } }"
description="Vuex store 2"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vplugin"
value="import Vue from 'vue' import $VueCompositionApi$ from '$VueCompositionApiPackage$' Vue.use($VueCompositionApi$)"
description="Import a plugin to main.js or plugins file"
toReformat="true" toShortenFQNames="true">
<variable name="VueCompositionApiPackage" expression="" defaultValue=""@vue/composition-api"" alwaysStopAt="true"/>
<variable name="VueCompositionApi" expression="" defaultValue=""VueCompositionApi"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vtest"
value="import Vue from 'vue'; import $componentName$ from './components/$componentName$'; describe('$componentName$.vue', () => { it('$name$', () => { const Constructor = Vue.extend($componentName$); const vm = new Constructor().$mount$(); expect(vm.$el$.querySelector('.hello h1').textContent) .to.equal($equal$); }); });"
description="Unit test component"
toReformat="true" toShortenFQNames="true">
<variable name="name" expression="" defaultValue=""should render correct contents"" alwaysStopAt="true"/>
<variable name="equal" expression="" defaultValue=""'Welcome to Your Vue.js App'"" alwaysStopAt="true"/>
<variable name="mount" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="el" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="componentName" expression="" defaultValue=""HelloWorld"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3useinoptions"
value="import { $component$ } from '@/composables/$component$.js' export default { setup () { const { $name$ } = $component$() return { $name$ } } }"
description="Use Composition API within Options API"
toReformat="true" toShortenFQNames="true">
<variable name="component" expression="" defaultValue=""component"" alwaysStopAt="true"/>
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vcommit"
value="$mutationName$() { this.\$store$.commit('$mutationName$', $payload$); }"
description="Commit to vuex store in methods for mutation"
toReformat="true" toShortenFQNames="true">
<variable name="store" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="mutationName" expression="" defaultValue=""mutationName"" alwaysStopAt="true"/>
<variable name="payload" expression="" defaultValue=""payload"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="v3computed"
value="const $name$ = computed(() => { return $return$ })"
description="Vue Composition api - computed"
toReformat="true" toShortenFQNames="true">
<variable name="return" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3reactive"
value="const $name$ = reactive({ $count$: $END$ })"
description="Vue Composition api - reactive"
toReformat="true" toShortenFQNames="true">
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<variable name="count" expression="" defaultValue=""count"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3ref"
value="const $name$ = ref($initialValue$)"
description="Vue Ref"
toReformat="true" toShortenFQNames="true">
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<variable name="initialValue" expression="" defaultValue=""initialValue"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3watch-array"
value="watch([$foo$, $bar$], ([new$1$, new$2$], [prev$1$, prev$2$]) => { $3$ })"
description="Vue Composition api - watch as array"
toReformat="true" toShortenFQNames="true">
<variable name="1" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="2" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="3" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="foo" expression="" defaultValue=""foo"" alwaysStopAt="true"/>
<variable name="bar" expression="" defaultValue=""bar"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3watch"
value="watch(() => $foo$, (newValue, oldValue) => { $body$ })"
description="Vue Composition api - watcher single source"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="foo" expression="" defaultValue=""foo"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3watcheffect"
value="watchEffect(() => { $body$ })"
description="Vue Composition api - watchEffect"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3reactive-setup"
value="import { reactive, toRefs } from 'vue' export default { setup () { const state = reactive({ $count$: $END$, }) return { ...toRefs(state), } } }"
description="Vue Composition API Script with Reactive"
toReformat="true" toShortenFQNames="true">
<variable name="count" expression="" defaultValue=""count"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vcomputed"
value="computed: { $name$() { return this.$data$ $END$ } },"
description="Computed value"
toReformat="true" toShortenFQNames="true">
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<variable name="data" expression="" defaultValue=""data"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vc-direct"
value="Vue.directive('$directiveName$', { bind(el, binding, vnode) { el.style.$arg$ = binding.value.$arg$; } });"
description="Vue custom directive"
toReformat="true" toShortenFQNames="true">
<variable name="directiveName" expression="" defaultValue=""directiveName"" alwaysStopAt="true"/>
<variable name="arg" expression="" defaultValue=""arg"" alwaysStopAt="true"/>
<context>
<option name="JS_STATEMENT" value="true"/>
<option name="TS_STATEMENT" value="true"/>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vdata"
value="data() { return { $key$: $value$ } },"
description="Vue Component Data"
toReformat="true" toShortenFQNames="true">
<variable name="key" expression="" defaultValue=""key"" alwaysStopAt="true"/>
<variable name="value" expression="" defaultValue=""value"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vdispatch"
value="$actionName$() { this.\$store$.dispatch('$actionName$', $payload$); }"
description="Dispatch to vuex store in methods for action"
toReformat="true" toShortenFQNames="true">
<variable name="store" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="actionName" expression="" defaultValue=""actionName"" alwaysStopAt="true"/>
<variable name="payload" expression="" defaultValue=""payload"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vfilter"
value="filters: { $fnName$: function($value$) { return $value$$END$; } }"
description="Vue filter"
toReformat="true" toShortenFQNames="true">
<variable name="fnName" expression="" defaultValue=""fnName"" alwaysStopAt="true"/>
<variable name="value" expression="" defaultValue=""value"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vimport-dynamic"
value="$New$ = () => import('@/components/$New$.vue')"
description="Import component that should be lazy loaded"
toReformat="true" toShortenFQNames="true">
<variable name="New" expression="" defaultValue=""New"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vimport-export"
value="import $Name$ from '@/components/$Name$.vue'; export default { components: { $Name$ }, };"
description="Import a component and include it in export default"
toReformat="true" toShortenFQNames="true">
<variable name="Name" expression="" defaultValue=""Name"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vimport"
value="import $New$ from '@/components/$New$.vue';"
description="Import one component into another"
toReformat="true" toShortenFQNames="true">
<variable name="New" expression="" defaultValue=""New"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vimport-gsap"
value="import gsap from 'gsap';"
description="Import GSAP library"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vimport-lib"
value="import { $libName$ } from '$libName$';"
description="Import a library"
toReformat="true" toShortenFQNames="true">
<variable name="libName" expression="" defaultValue=""libName"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vcomponents"
value="components: { $New$, },"
description="Import one component into another, within export statement"
toReformat="true" toShortenFQNames="true">
<variable name="New" expression="" defaultValue=""New"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="v3onbeforemount"
value="onBeforeMount(() => {$body$})"
description="Vue onBeforeMount Lifecycle hook"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3onbeforeunmount"
value="onBeforeUnmount(() => {$body$})"
description="(beforeDestroy) Vue onBeforeUnmount Lifecycle hook"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3onbeforeupdate"
value="onBeforeUpdate(() => {$body$})"
description="Vue onBeforeUpdate Lifecycle hook"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3onerrorcaptured"
value="onErrorCaptured(() => {$body$})"
description="Vue onErrorCaptured Lifecycle hook"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3onmounted"
value="onMounted(() => {$body$})"
description="Vue Mounted Lifecycle hook"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3onunmounted"
value="onUnmounted(() => {$body$})"
description="(destroyed) Vue onUnmounted Lifecycle hook"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="v3onupdated"
value="onUpdated(() => {$body$})"
description="Vue onUpdated Lifecycle hook"
toReformat="true" toShortenFQNames="true">
<variable name="body" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vbeforecreate"
value="beforeCreate () { $END$; },"
description="BeforeCreate lifecycle method"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vbeforedestroy"
value="beforeDestroy () { $END$; },"
description="BeforeDestroy lifecycle method"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vbeforemount"
value="beforeMount () { $END$; },"
description="BeforeMount lifecycle method"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vbeforeupdate"
value="beforeUpdate () { $END$; },"
description="BeforeUpdate lifecycle method"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vcreated"
value="created () { $END$; },"
description="Created lifecycle method"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vdestroyed"
value="destroyed () { $END$; },"
description="Destroyed lifecycle method"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vmounted"
value="mounted () { $END$; },"
description="Mounted lifecycle method"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vupdated"
value="updated () { $END$; },"
description="Updated lifecycle method"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vmapactions"
value="import { mapActions } from 'vuex'; export default { methods: { ...mapActions([ $nameOfAction$, //also supports payload `this.nameOfAction(amount)` ]) }, };"
description="Mapactions inside a vue component"
toReformat="true" toShortenFQNames="true">
<variable name="nameOfAction" expression="" defaultValue=""'nameOfAction'"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vmapgetters"
value="import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters([ $nameOfGetter$, ]) }, };"
description="Mapgetters inside a vue component"
toReformat="true" toShortenFQNames="true">
<variable name="nameOfGetter" expression="" defaultValue=""'nameOfGetter'"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vmapmutations"
value="import { mapMutations } from 'vuex'; export default { methods: { ...mapMutations([ $nameOfMutation$, //also supports payload `this.nameOfMutation(amount)` ]) }, };"
description="Mapmutations inside a vue component"
toReformat="true" toShortenFQNames="true">
<variable name="nameOfMutation" expression="" defaultValue=""'nameOfMutation'"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vmapstate"
value="import { mapState } from 'vuex'; export default { computed: { ...mapState([ $vmapstate$, ]) }, };"
description="Map getters inside a vue component"
toReformat="true" toShortenFQNames="true">
<variable name="vmapstate" expression="" defaultValue=""'nameOfState'"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vmethod"
value="methods: { $name$() { $END$ } },"
description="Vue method"
toReformat="true" toShortenFQNames="true">
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vmixin"
value="const $mixinName$ = { mounted() { console.log('hello from mixin!'); }, };"
description="Vue mixin"
toReformat="true" toShortenFQNames="true">
<variable name="mixinName" expression="" defaultValue=""mixinName"" alwaysStopAt="true"/>
<context>
<option name="JS_STATEMENT" value="true"/>
<option name="TS_STATEMENT" value="true"/>
</context>
</template>
<template name="vprops"
value="props: { $propName$: { type: $type$, default: $default$ }, },"
description="Vue Props with Default"
toReformat="true" toShortenFQNames="true">
<variable name="default" expression="" defaultValue=""0"" alwaysStopAt="true"/>
<variable name="propName" expression="" defaultValue=""propName"" alwaysStopAt="true"/>
<variable name="type" expression="" defaultValue=""Number"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vanimhook-js"
value="beforeEnter(el) { console.log('beforeEnter'); }, enter(el, done) { console.log('enter'); done(); }, beforeLeave(el) { console.log('beforeLeave'); }, leave(el, done) { console.log('leave'); done(); },"
description="Vue transition component js hooks"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vmixin-use"
value="mixins: [$mixinName$],"
description="Vue use mixin"
toReformat="true" toShortenFQNames="true">
<variable name="mixinName" expression="" defaultValue=""mixinName"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vwatcher"
value="watch: { $data$($newValue$, $oldValue$) { $END$ } },"
description="Vue watcher"
toReformat="true" toShortenFQNames="true">
<variable name="data" expression="" defaultValue=""data"" alwaysStopAt="true"/>
<variable name="newValue" expression="" defaultValue=""newValue"" alwaysStopAt="true"/>
<variable name="oldValue" expression="" defaultValue=""oldValue"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vwatcher-options"
value="watch: { $data$: { immediate: $true$, deep: $true$, handler($newValue$, $oldValue$) { $END$ } } },"
description="Vue watcher with options"
toReformat="true" toShortenFQNames="true">
<variable name="data" expression="" defaultValue=""data"" alwaysStopAt="true"/>
<variable name="true" expression="" defaultValue=""true"" alwaysStopAt="true"/>
<variable name="newValue" expression="" defaultValue=""newValue"" alwaysStopAt="true"/>
<variable name="oldValue" expression="" defaultValue=""oldValue"" alwaysStopAt="true"/>
<context>
<option name="VUE_COMPONENT_DESCRIPTOR" value="true"/>
</context>
</template>
<template name="vconfig"
value="module.exports = { css: { loaderOptions: { $sass$: { data: `$data$` } } } }"
description="Vue.config.js"
toReformat="true" toShortenFQNames="true">
<variable name="data" expression="" defaultValue=""@import '@/styles/_variables.scss';"" alwaysStopAt="true"/>
<variable name="sass" expression="" defaultValue=""sass"" alwaysStopAt="true"/>
<context>
<option name="VUE_SCRIPT" value="true"/>
</context>
</template>
<template name="vclass"
value="<$div$ :class="{ $className$: $data$ }"></$div$>"
description="Vue class binding"
toReformat="true" toShortenFQNames="true">
<variable name="div" expression="" defaultValue=""div"" alwaysStopAt="true"/>
<variable name="className" expression="" defaultValue=""className"" alwaysStopAt="true"/>
<variable name="data" expression="" defaultValue=""data"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vclass-obj"
value="<$div$ :class="[$classNameA$, $classNameB$]"></$div$>"
description="Vue class binding"
toReformat="true" toShortenFQNames="true">
<variable name="div" expression="" defaultValue=""div"" alwaysStopAt="true"/>
<variable name="classNameA" expression="" defaultValue=""classNameA"" alwaysStopAt="true"/>
<variable name="classNameB" expression="" defaultValue=""classNameB"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vel-props"
value="<$component$ :$propName$="$END$"></$component$>"
description="Vue component element with props"
toReformat="true" toShortenFQNames="true">
<variable name="component" expression="" defaultValue=""component"" alwaysStopAt="true"/>
<variable name="propName" expression="" defaultValue=""propName"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vemit-child"
value="@change="$emit$('change', $event$.target.value)""
description="Vue Emit from Child Component"
toReformat="true" toShortenFQNames="true">
<variable name="emit" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="event" expression="" defaultValue="""" alwaysStopAt="true"/>
<context>
<option name="VUE_INSIDE_TAG" value="true"/>
</context>
</template>
<template name="vemit-parent"
value="@change="$foo$ = $event$""
description="Vue Emit to Parent Component"
toReformat="true" toShortenFQNames="true">
<variable name="event" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="foo" expression="" defaultValue=""foo"" alwaysStopAt="true"/>
<context>
<option name="VUE_INSIDE_TAG" value="true"/>
</context>
</template>
<template name="vsrc"
value="<img :src="'/path/to/images/' + $fileName$" alt="$altText$"/>"
description="Vue image source binding"
toReformat="true" toShortenFQNames="true">
<variable name="fileName" expression="" defaultValue=""fileName"" alwaysStopAt="true"/>
<variable name="altText" expression="" defaultValue=""altText"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vclass-obj-mult"
value="<$div$ :class="[$classNameA$, {$classNameB$ : $condition$}]"></$div$>"
description="Vue multiple conditional class bindings"
toReformat="true" toShortenFQNames="true">
<variable name="div" expression="" defaultValue=""div"" alwaysStopAt="true"/>
<variable name="classNameA" expression="" defaultValue=""classNameA"" alwaysStopAt="true"/>
<variable name="classNameB" expression="" defaultValue=""classNameB"" alwaysStopAt="true"/>
<variable name="condition" expression="" defaultValue=""condition"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vroutename"
value="<router-link :to="{name: '$name$'}">$LinkTitle$</router-link>"
description="Named routing link"
toReformat="true" toShortenFQNames="true">
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<variable name="LinkTitle" expression="" defaultValue=""LinkTitle"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vroutenameparam"
value="<router-link :to="{name: '$name$', params:{$id$: '$value$'} }">$LinkTitle$</router-link>"
description="Named routing link w/ params"
toReformat="true" toShortenFQNames="true">
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<variable name="id" expression="" defaultValue=""id"" alwaysStopAt="true"/>
<variable name="value" expression="" defaultValue=""value"" alwaysStopAt="true"/>
<variable name="LinkTitle" expression="" defaultValue=""LinkTitle"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vslot-named"
value="<template v-slot:$name$>$defaultcontent$</template>"
description="Named slot"
toReformat="true" toShortenFQNames="true">
<variable name="name" expression="" defaultValue=""name"" alwaysStopAt="true"/>
<variable name="defaultcontent" expression="" defaultValue=""defaultcontent"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vnuxtl"
value="<nuxt-link to="/$page$">$page$</nuxt-link>"
description="Nuxt routing link"
toReformat="true" toShortenFQNames="true">
<variable name="page" expression="" defaultValue=""page"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vroutepath"
value="<router-link to="$path$">$LinkTitle$</router-link>"
description="Path routing link"
toReformat="true" toShortenFQNames="true">
<variable name="path" expression="" defaultValue=""path"" alwaysStopAt="true"/>
<variable name="LinkTitle" expression="" defaultValue=""LinkTitle"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vstyle"
value="<$div$ :style="{ fontSize: $data$ + 'px' }"></$div$>"
description="Vue inline style binding"
toReformat="true" toShortenFQNames="true">
<variable name="div" expression="" defaultValue=""div"" alwaysStopAt="true"/>
<variable name="data" expression="" defaultValue=""data"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vstyle-obj"
value="<$div$ :style="[$styleObjectA$, $styleObjectB$]"></$div$>"
description="Vue inline style binding, objects"
toReformat="true" toShortenFQNames="true">
<variable name="div" expression="" defaultValue=""div"" alwaysStopAt="true"/>
<variable name="styleObjectA" expression="" defaultValue=""styleObjectA"" alwaysStopAt="true"/>
<variable name="styleObjectB" expression="" defaultValue=""styleObjectB"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vanim"
value="<transition mode="out-in" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave" :css="false"> </transition>"
description="Vue transition component with JavaScript hooks"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vfor"
value="<$div$ v-for="$item$ in $item$s" :key="$item$.id"> {{ $item$ }} </$div$>"
description="Vue v-for statement"
toReformat="true" toShortenFQNames="true">
<variable name="div" expression="" defaultValue=""div"" alwaysStopAt="true"/>
<variable name="item" expression="" defaultValue=""item"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vmodel"
value="<input v-model="$data$" type="text" />"
description="Vue v-model directive"
toReformat="true" toShortenFQNames="true">
<variable name="data" expression="" defaultValue=""data"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="vmodel-num"
value="<input v-model.number="$numData$" type="number" step="1" />"
description="Vue v-model directive number input"
toReformat="true" toShortenFQNames="true">
<variable name="numData" expression="" defaultValue=""numData"" alwaysStopAt="true"/>
<context>
<option name="VUE_TEMPLATE" value="true"/>
</context>
</template>
<template name="von"
value="@click="$handler$($arg$, $event$)""
description="Vue v-on click handler with arguments"
toReformat="true" toShortenFQNames="true">
<variable name="event" expression="" defaultValue="""" alwaysStopAt="true"/>
<variable name="handler" expression="" defaultValue=""handler"" alwaysStopAt="true"/>
<variable name="arg" expression="" defaultValue=""arg"" alwaysStopAt="true"/>
<context>
<option name="VUE_INSIDE_TAG" value="true"/>
</context>
</template>
<template name="vbase"
value="<template> <div> </div> </template> <script> export default { $END$ } </script> <style lang="scss" scoped> </style>"
description="Base for Vue File with SCSS"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-3"
value="<template> <div> </div> </template> <script> export default { setup () { $END$ return {} } } </script> <style lang="scss" scoped> </style>"
description="Base for Vue File Composition API with SCSS"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-3-reactive"
value="<template> <div> </div> </template> <script> import { reactive, toRefs } from 'vue' export default { setup () { const state = reactive({ $count$: $END$, }) return { ...toRefs(state), } } } </script> <style lang="scss" scoped> </style>"
description="Base for Vue File Composition API with SCSS"
toReformat="true" toShortenFQNames="true">
<variable name="count" expression="" defaultValue=""count"" alwaysStopAt="true"/>
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-3-ts"
value="<template> <div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup () { $END$ return {} } }) </script> <style scoped> </style>"
description="Base for Vue File Composition API - Typescript"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-3-setup"
value="<template> <div> </div> </template> <script setup> </script> <style lang="scss" scoped> </style>"
description="Base for Vue File Setup Composition API with SCSS"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-3-ts-setup"
value="<template> <div> </div> </template> <script setup lang="ts"> </script> <style scoped> </style>"
description="Base for Vue File Setup Composition API - Typescript"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-ts-class"
value="<template> <div> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; @Component export default class $END$ extends Vue { } </script> <style scoped> </style>"
description="Base for Vue File with Class based Typescript format"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-css"
value="<template> <div> </div> </template> <script> export default { $END$ } </script> <style scoped> </style>"
description="Base for Vue File with CSS"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-less"
value="<template> <div> </div> </template> <script> export default { $END$ } </script> <style lang="less" scoped> </style>"
description="Base for Vue File with PostCSS"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-ns"
value="<template> <div> </div> </template> <script> export default { $END$ } </script>"
description="Base for Vue File with no styles"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-sass"
value="<template> <div> </div> </template> <script> export default { $END$ } </script> <style lang="sass" scoped> </style>"
description="Base for Vue File with PostCSS"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-styl"
value="<template> <div> </div> </template> <script> export default { $END$ } </script> <style lang="stylus" scoped> </style>"
description="Base for Vue File with Stylus"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-ts"
value="<template> <div> </div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ $END$ }) </script> <style scoped> </style>"
description="Base for Vue File with Typescript"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
<template name="vbase-pcss"
value="<template> <div> </div> </template> <script> export default { $END$ } </script> <style lang="postcss" scoped> </style>"
description="Base for Vue File with PostCSS"
toReformat="true" toShortenFQNames="true">
<context>
<option name="VUE_TOP_LEVEL" value="true"/>
</context>
</template>
</templateSet>