Vue 3 Snippets

If you want to write Vue code in VScode, you've probably already installed Vetur. If you haven't, what are you waiting for? It's essential for Vue development! If you have, you've probably noticed that it provides several snippets for scaffolding Vue files, but it doesn't provide snippets for the contents of those files. That's what these snippets are for. Add them to your editor, and they will help you organize and document your Vue components. Use it alongside Vetur for the best Vue development experience.

• Stub Vue Single-File Components' setup function, with the setup snippet

  

  If you've switched from Vue 2 to Vue 3, you've probably heard of the Composition API. If you haven't, it's a brand-new way to set your component's options. It wraps all of the same functionality of the Options API in a setup function, rather than a configuration object. It's more flexible, and easier to debug. But, if you're like most Vue developers, you probably haven't used it in your components. I get it. The API is new, and unfamiliar. It's another thing you have to learn. The setup snippet lowers the Composition API's learning curve.

• Document Vue Single-File Components, with the /component tag

  

  The only thing harder than writing a new Vue component, is reading a component you wrote six months ago, and wondering "what was I thinking?" A component is only useful if you can remember how it works. Use the /component snippet to stub out a Vue-Docgen block for your component.

Usage

Use the following snippets to stub out options with the Vue 3 Composition API

Function	Trigger
Setup Function Stubs out a function that initializes your component with all of the data, computed properties, watchers, lifecycle hooks, provides and injects that you would otherwise define using the Options API.	setup()
Provide Function Stubs out a function that makes a property available to every descendent of your component.	provide()
Inject Function Stubs out a statement which injects an item that an ancestor provides your component.	const inject =
Computed Property Function Stubs out a function that defines a reactive computed property.	computed()
Method Stubs out a single method.	method()
WatchEffect Function Stubs out a function that defines a callback that runs when a property changes.	watchEffect()
Watch Function Stubs out a function that defines a callback that runs when a property changes. Unlike watchEffect(), watch receives both the previous and current value of a property, so that you can conditionally run code based on the difference.	watch()
OnBeforeMount Function Stubs out a function that runs code before your component is mounted.	onBeforeMount()
onMounted Function Stubs out a function that runs code as soon as your component is mounted.	onMounted()
onBeforeUpdate Function Stubs out a function that runs code before your component is patched with changes to the DOM.	onBeforeUpdate()
onUpdated Function Stubs out a function that runs code as soon as your component is patched with changes to the DOM.	onUpdated()
onActivated Function Stubs out a function that runs code when your kept-alive component is activated.	onActivated()
onDeactivated Function Stubs out a function that runs code before your kept-alive component is deactivated.	onDeactivated()
onBeforeUnmount Function Stubs out a function that runs code before your component is unmounted.	onBeforeUnmount()
onUnmounted Function Stubs out a function that runs code as soon as your component is unmounted.	onUnmounted()
onErrorCaptured Function Stubs out a function that runs code whenever an error occurs in your component.	onErrorCaptured()
onRenderTracked Function Stubs out a function that runs code as soon as your component is rendered.	onRenderTracked()
onRenderTriggered Function Stubs out a function that runs code as soon as a change elsewhere in the Virtual DOM triggers a re-render of your component.	onRenderTriggered()

Use the following snippets to stub Vue Docgen sections and tags.

Section	Trigger
component Describes the purpose and behavior of the component. Place it directly above a component's export default statement.	/component
slot Describes what can be inserted into the slot it documents.	/slot
event Lists the event(s) that the are $emit(...)ed by the method or watcher it documents.	/event

Tag	Trigger
@values Lists the values a prop can take.	@values
@example Shows an example of how to use the code it documents.	@example
@deprecated Deprecates the code it documents, and links to the replacement code.	@deprecated
@see Links to another section of the documentation, or to a website.	@see
@link Links to another section of the documentation, or to a website.	@link
@author List the name and author of the person who wrote the code.	@author
@since Lists the version that the code it documents first appeared in the codebase.	@since
@version Lists the current semantic version of the code it documents.	@version
@ignore Excludes the documentation from autogenerated documentation sites.	@ignore
@param Describes the values that the method it documents accepts for an argument.	@param

Roadmap

See CHANGELOG.md

Contribute to Vue 3 Snippets

Repository Structure:

Develop:

See Visual Studio Code ➝ Create your own snippets

Test:

1. Open this project in VScode. Then, press F5 to load the snippets in a new VScode window.

   

2. Create a new Vue file, or open an existing one.

   

3. Test the snippets you just made.

   

4. Whenever you save changes to the snippets, hit the 'reload' button in the debugger tray to send the changes to the VScode window.