vue-snippets.json

{
	"vue test file": {
		"prefix": "spec",
		"body": [
			"import '@testing-library/jest-dom';",
			"import { fireEvent } from '@testing-library/vue';",
			"import { render } from '@/utils/testUtils';",
			"import ${TM_FILENAME/(.*)\\.spec\\..+$/$1/} from '../${TM_FILENAME/(.*)\\.spec\\..+$/$1/}.vue';",
			"",
			"const initialProps = {",
			"\t$1",
			"};",
			"",
			"const renderComponent = (options = {}) => render(${TM_FILENAME/(.*)\\.spec\\..+$/$1/}, { ...options });",
			"",
			"describe('${TM_FILENAME/(.*)\\.spec\\..+$/$1/}', () => {",
			"",
			"\t$0",
			"",
			"})"
		],
		"description": "vue component test boilerplate"
	},
	"story": {
		"prefix": "story",
		"body": [
			"import ${TM_FILENAME/(.*)\\.stories\\..+$/$1/} from './${TM_FILENAME/(.*)\\.stories\\..+$/$1/}.vue';",
			"//import mdx from './${TM_FILENAME/(.*)\\.stories\\..+$/$1/}.mdx';",
			"",
			"export default {",
			"\ttitle: 'Components/${TM_FILENAME/(.*)\\.stories\\..+$/$1/}',",
			"\tcomponent: ${TM_FILENAME/(.*)\\.stories\\..+$/$1/},",
			"//\tparameters: {",
			"//\t\tdocs: {",
			"//\t\t\tpage: mdx",
			"//\t\t}",
			"//\t},",
			"};",
			"",
			"const Template = (args, { argTypes }) => ({",
			"\tprops: Object.keys(argTypes),",
			"\tcomponents: {  ${TM_FILENAME/(.*)\\.stories\\..+$/$1/} },",
			"\tsetup: () => ({ args }),",
			"\ttemplate: '<${TM_FILENAME/([A-Z][a-z]*)([A-Z][a-z]*)*\\.stories\\..+$/${1:/downcase}${2:+-}${2:/downcase}/g} v-bind=\"args\"></${TM_FILENAME/([A-Z][a-z]*)([A-Z][a-z]*)*\\.stories\\..+$/${1:/downcase}${2:+-}${2:/downcase}/g}>'",
			"});",
			"",
			"export const Primary = Template.bind({});",
			"Primary.args = {",
			"\t$1",
			"}"
		],
		"description": "Storybook for vue component boilerplate"
	},
	// the follow snippets go in vue.json
	"component": {
		"prefix": "component",
		"body": [
			"<template>",
			"",
			"</template>",
			"",
			"<script>",
			"export default {",
			"\tname: '${TM_FILENAME_BASE}',",
			"\tprops: {",
			"\t\t$1",
			"\t},",
			"\temits: [],",
			"\tdata () {",
			"\t\treturn {",
			"\t\t\t$2",
			"\t\t};",
			"},",
			"\tcomputed: {",
			"\t\t$3",
			"\t},",
			"\tmethods: {",
			"\t\t$4",
			"\t}",
			"}",
			"</script>",
			"",
			"<style scoped lang=\"scss\">",
			"",
			"</style>"
		],
		"description": "boilerplate for a Vue component"
	}
}