nvim-plugins/friendly-snippets
1
0
Fork 0
mirror of https://github.com/rafamadriz/friendly-snippets synced 2024-09-16 22:14:02 +02:00
Code Issues Projects Releases Packages Wiki Activity

add new snippet for vue (#404)

Browse source 
* remove snippet vue 2 is dead

* feat: add new snippet vue

* fix: typo description reactive

* chore: change name file vue readable

* feat: add style.json, fix, refactoring snippet vue

* fix: choice vue style
This commit is contained in:
Bobby Rahmanda 2024-02-17 08:56:10 +07:00 committed by GitHub
parent 00ac993cb5
commit dbd45e9ba7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 192 additions and 200 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
package.json
View file

@ -295,20 +295,24 @@
},
{
"language": "vue",
"path": "./snippets/frameworks/vue/nuxt_html.json"
"path": "./snippets/frameworks/vue/nuxt-html.json"
},
{
"language": "vue",
"path": "./snippets/frameworks/vue/nuxt_js_ts.json"
"path": "./snippets/frameworks/vue/nuxt-script.json"
},
{
"language": "vue",
"path": "./snippets/frameworks/vue/javascript.json"
"path": "./snippets/frameworks/vue/script.json"
},
{
"language": "vue",
"path": "./snippets/frameworks/vue/vue.json"
},
{
"language": "vue",
"path": "./snippets/frameworks/vue/style.json"
},
{
"language": "angular",
"path": "./snippets/frameworks/angular/html.json"

0
snippets/frameworks/vue/nuxt_html.json → snippets/frameworks/vue/nuxt-html.json
View file

0
snippets/frameworks/vue/nuxt_js_ts.json → snippets/frameworks/vue/nuxt-script.json
View file

350
snippets/frameworks/vue/javascript.json → snippets/frameworks/vue/script.json
View file

@ -20,29 +20,74 @@
],
"description": "A utility for waiting for the next DOM update flush."
},
"defineAsyncComponent": {
"prefix": "defineAsyncComponent",
"defineProps": {
"prefix": "defineProps",
"body": [
"const $1 = defineAsyncComponent(() =>",
"import('$0')",
");"
"const props = defineProps({",
"\t$0",
"});"
],
"description": "create a async vue component"
"description": "A list/hash of attributes that are exposed to accept data from the parent component. "
},
"defineProps-TS": {
"prefix": "definePropsTS",
"body": [
"const props = defineProps<{",
"\t$0",
"}>()"
],
"description": "A list/hash of attributes that are exposed to accept data from the parent component. "
},
"defineEmits": {
"prefix": "defineEmits",
"body": [
"const ${1:emit} = defineEmits([ $0 ]);"
],
"description": "A list of events that componetnt can emits to the parent component. "
},
"defineEmits-TS": {
"prefix": "defineEmitsTS",
"body": [
"const ${1:emit} = defineEmits<{",
"\t(e: '${2:event}', ${3:id}: ${4:type}: ${5:type}) ",
"\t$0",
"}>()"
],
"description": "A list of events that componetnt can emits to the parent component. "
},
"defineEmits-TS-tuple": {
"prefix": "defineEmitsTStuple",
"body": [
"const ${1:emit} = defineEmits<{",
"\t${2:event}: [${3:id}: ${4:type}]",
"\t$0",
"}>()"
],
"description": "(3.3+: alternative, more succinct syntax) a list of events that componetnt can emits to the parent component. "
},
"defineComponent": {
"prefix": "defineComponent",
"body": [
"const $1 = defineComponent({",
"$0",
"\t$0",
"})"
],
"description": "create a component vue component"
},
"defineAsyncComponent": {
"prefix": "defineAsyncComponent",
"body": [
"const $1 = defineAsyncComponent(() =>",
"\timport('$0')",
");"
],
"description": "create a async vue component"
},
"defineCustomElement": {
"prefix": "defineCustomElement",
"body": [
"const $1 = defineCustomElement({",
"$0",
"\t$0",
"})"
],
"description": "create a custom element vue"
@ -58,22 +103,6 @@
],
"description": "The data object for the Vue instance."
},
"props-composition": {
"prefix": "defineProps",
"body": [
"const props = defineProps({",
"$0",
"});"
],
"description": "A list/hash of attributes that are exposed to accept data from the parent component. "
},
"emits-composition": {
"prefix": "emitsVue",
"body": [
"const emits = defineEmits([ $0 ]);"
],
"description": "A list of events that componetnt can emits to the parent component. "
},
"computed-options": {
"prefix": "computed",
"body": [
@ -87,7 +116,16 @@
"prefix": "computedVue",
"body": [
"const $1 = computed(() => {",
"$0",
"\t$0",
"});"
],
"description": "Computed properties to be mixed into the Vue instance. "
},
"computed-composition-ts": {
"prefix": "computedVueTS",
"body": [
"const $1 = computed<${2:type}>(() => {",
"\t$0",
"});"
],
"description": "Computed properties to be mixed into the Vue instance. "
@ -95,16 +133,73 @@
"reactive-composition": {
"prefix": "reactiveVue",
"body": [
"const $1 = reactive($0)"
"const $1 = reactive({",
"\t$0",
"})"
],
"description": "Reative properties to be mixed into the Vue instance. "
"description": "Reactive properties to be mixed into the Vue instance. "
},
"reactive-composition-ts": {
"prefix": "reactiveVueTS",
"body": [
"interface $1 {",
"\t${2:property}: ${3:type}",
"}",
"",
"const $4:${5:type} = reactive({",
"\t$0",
"})"
],
"description": "Reactive properties to be mixed into the Vue instance. "
},
"shallow-reactive-composition": {
"prefix": "sreactVue",
"prefix": "shallowReactive",
"body": [
"const $1 = shallowReactive({$0})"
"const ${1:state} = shallowReactive({",
"\t$0",
"})"
],
"description": "Shallow reative properties to be mixed into the Vue instance. "
"description": "Shallow version of reactive(). Use with Caution !! Shallow data structures should only be used for root level state in a component. Avoid nesting it inside a deep reactive object as it creates a tree with inconsistent reactivity behavior which can be difficult to understand and debug."
},
"shallowReadonly": {
"prefix": "shallowReadonly",
"body": [
"const ${1:state} = shallowReadonly({",
"\t$0",
"})"
],
"description": "Shallow version of readonly(). Use with Caution !! Shallow data structures should only be used for root level state in a component. Avoid nesting it inside a deep reactive object as it creates a tree with inconsistent reactivity behavior which can be difficult to understand and debug."
},
"toRaw": {
"prefix": "toRaw()",
"body": [
"toRaw($0)"
],
"description": "Returns the raw, original object of a Vue-created proxy."
},
"effectScope": {
"prefix": "effectScope()",
"body": [
"const $1 = effectScope()",
"$0"
],
"description": "Returns the current active effect scope if there is one."
},
"getCurrentScope": {
"prefix": "getCurrentScope",
"body": [
"const $1 = getCurrentScope()",
"$0"
],
"description": "Returns the current active effect scope if there is one."
},
"onScopeDispose": {
"prefix": "onScopeDispose()",
"body": [
"const $1 = onScopeDispose()",
"$0"
],
"description": "Registers a dispose callback on the current active effect scope. The callback will be invoked when the associated effect scope is stopped."
},
"ref-composition": {
"prefix": "refVue",
@ -114,6 +209,14 @@
],
"description": "Ref properties to be mixed into the Vue instance. "
},
"ref-composition-ts": {
"prefix": "refVueTS",
"body": [
"const $3 = ref<${2:type}>($1)",
"$0"
],
"description": "Ref properties to be mixed into the Vue instance. "
},
"template-ref-ts-composition": {
"prefix": "trfVue",
"body": [
@ -137,7 +240,7 @@
],
"description": "Methods to be mixed into the Vue instance."
},
"method-composition": {
"function": {
"prefix": "functionVue3",
"body": [
"const $1 = ($2) => {",
@ -146,17 +249,8 @@
],
"description": "Method composition properties to be mixed into the Vue instance. "
},
"watch-options": {
"watch": {
"prefix": "watch",
"body": [
"watch: {",
"\t$1",
"},$0"
],
"description": "An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. Note that you should not use an arrow function to define a watcher."
},
"watch-composition": {
"prefix": "cwatch",
"body": [
"watch($1, ($2, $3) => {",
"$0",
@ -164,19 +258,6 @@
],
"description": "Watch over a reactive source and call a function in reaction to state changes "
},
"watchWithOptions": {
"prefix": "watchWithOptions",
"body": [
"${1:key}: {",
"\tdeep: ${2:true},",
"\timmediate: ${3:true},",
"\thandler: function (${4:val}, ${5:oldVal}) {",
"\t\t$6",
"\t}",
"},$0"
],
"description": "Vue Watcher with options."
},
"watchEffect-composition": {
"prefix": "watchEffect",
"body": [
@ -186,28 +267,38 @@
],
"description": "watchEffect from vue composition "
},
"onBeforeMount-composition": {
"stoppingWatcher": {
"prefix": "stopWatcher",
"body": [
"setTimeout(() => {",
"\twatchEffect(() => {})",
"}, ${1:100})",
"$0"
],
"description": "Stopping a Watcher vue"
},
"onBeforeMount": {
"prefix": "onBeforeMount",
"body": [
"onBeforeMount(() => {$0})"
],
"description": "Vue before mount composition lifecycle hook"
},
"onMounted-composition": {
"onMounted": {
"prefix": "onmounted",
"body": [
"onMounted(() => {$0})"
],
"description": "Vue mounted lifecycle hook"
},
"onBeforeUnmount-composition": {
"onBeforeUnmount": {
"prefix": "onBeforeUnmount",
"body": [
"onBeforeUnmount(() => {$0})"
],
"description": "Vue before unmount composition lifecycle hook"
},
"onUnmounted-composition": {
"onUnmounted": {
"prefix": "onunmounted",
"body": [
"onUnmounted(() => {$0})"
@ -232,7 +323,7 @@
],
"description": "Type: Function."
},
"onBeforeUpdate-composition": {
"onBeforeUpdate": {
"prefix": "onBeforeUpdate",
"body": [
"onBeforeUpdate(() => {$0})"
@ -459,7 +550,7 @@
"prefix": "beforeEnter",
"body": [
"beforeEnter: (to, from, next) => {",
"\t${1:// ...}",
"\t${0:// ...}",
"}"
],
"description": "beforeEnter: (to, from, next) => { }"
@ -468,7 +559,7 @@
"prefix": "beforeRouteEnter",
"body": [
"beforeRouteEnter (to, from, next) {",
"\t${1:// ...}",
"\t${0:// ...}",
"}"
],
"description": "beforeRouteEnter (to, from, next) { }"
@ -477,7 +568,7 @@
"prefix": "beforeRouteLeave",
"body": [
"beforeRouteLeave (to, from, next) {",
"\t${1:// ...}",
"\t${0:// ...}",
"}"
],
"description": "beforeRouteLeave (to, from, next) { }"
@ -491,141 +582,6 @@
],
"description": "scrollBehavior (to, from, savedPosition) { }"
},
"path": {
"prefix": "path",
"body": [
"path"
],
"description": "just a word"
},
"alias": {
"prefix": "alias",
"body": [
"alias"
],
"description": "just a word"
},
"mode": {
"prefix": "mode",
"body": [
"mode"
],
"description": "just a word"
},
"children": {
"prefix": "children",
"body": [
"children"
],
"description": "just a word"
},
"meta": {
"prefix": "meta",
"body": [
"meta"
],
"description": "just a word"
},
"asyncData": {
"prefix": "asyncData",
"body": [
"asyncData({${1:isDev}${2:, route}${3:, store}${4:, env}${5:, params}${6:, query}${7:, req}${8:, res}${9:, redirect}${10:, error}}) {",
"\t$11",
"},"
],
"description": "Type: Function."
},
"click": {
"prefix": "click",
"body": [
"click"
],
"description": "just a word"
},
"submit": {
"prefix": "submit",
"body": [
"submit"
],
"description": "just a word"
},
"mouse": {
"prefix": "mouse",
"body": [
"mouse"
],
"description": "just a word"
},
"scroll": {
"prefix": "scroll",
"body": [
"scroll"
],
"description": "just a word"
},
"keyup": {
"prefix": "keyup",
"body": [
"keyup"
],
"description": "just a word"
},
"enter": {
"prefix": "enter",
"body": [
"enter"
],
"description": "just a word"
},
"page-down": {
"prefix": "page-down",
"body": [
"page-down"
],
"description": "just a word"
},
"stop": {
"prefix": "stop",
"body": [
"stop"
],
"description": "just a word"
},
"prevent": {
"prefix": "prevent",
"body": [
"prevent"
],
"description": "just a word"
},
"self": {
"prefix": "self",
"body": [
"self"
],
"description": "just a word"
},
"capture": {
"prefix": "capture",
"body": [
"capture"
],
"description": "just a word"
},
"once": {
"prefix": "once",
"body": [
"once"
],
"description": "just a word"
},
"passive": {
"prefix": "passive",
"body": [
"passive"
],
"description": "just a word"
},
"onRenderTriggered-composition": {
"prefix": "onRenderTriggered",
"body": [

32
snippets/frameworks/vue/style.json Normal file
View file

@ -0,0 +1,32 @@
{
"tailwind-base": {
"prefix": "tailwindBase",
"body": [
"@tailwind base;",
"@tailwind components;",
"@tailwind utilities;"
],
"description": "An opinionated set of base styles for Tailwind projects."
},
"aspect-ratio": {
"prefix": "aspect-ratio",
"body": [
"aspect-${1|auto, square, video|}"
],
"description": "aspect-ratio"
},
"aspect-arbitrary": {
"prefix": "aspectArbitrary",
"body": [
"aspect-[$1] $0"
],
"description": "aspect arbitrary values"
},
"container": {
"prefix": "container",
"body": [
"container"
],
"description": "container => sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px) and use max-width overall"
}
}