Nova^™

Vue 3 Clips provides clips for:

• Vue 3 Options API
• Vue 3 Composition API
• Vue 3 Docgen Tags

If you want to write Vue code in Nova, you've probably already installed the Vue extension. 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 clips for scaffolding Vue files, but it doesn't provide clips for the contents of a vue file. That's what these clips are for. Add these clips to your editor, and it'll help you organize your vue components, and document your code as you go. Use it alongside the Vue extension for a complete Vue development experience.

If you've been writing Vue single-file components for a while, you've probably noticed that they get really complicated, really fast. Use these clips to bring some order to the chaos. These clips stub out the options in the options API, and the setup function in the composition API. They even stub out the vue-styleguidist docgen comments for your components, props, methods, events and slots. Once I started using these clips in my code, it became much easier for other people to follow. If you use these clips throughout your code, the same will happen for you.

Getting started is really easy:

If you want to stub out all of the options in a vue component, use the options clip.

If you want to stub out all of the functions in a setup function, use the setup() clip.

After you use either of those clips, just follow the instructions contained within them. Every other clip you need is already contained inside both of them. All you need to do is uncomment the clip you want to expand, and hit tab to complete it!

Here are all of the clips that this extension provides.

Vue 3 Options API

Options	Clip	What it does:
All Options	options	Stubs out every option in the options API. Use it inside the export default {...} block of your Vue component.
Props Object	props:{}	Stubs out an object that contains the definition of every prop in your component.
Components Object	components:{}	Stubs out an object that contains a hash of components that you imported, and want to use in your component's template.
Inject Array	inject:[]	Holds a list of properties provided by ancestor components that you want to inject.
Data Constructor Function	data()	Holds the values you want to initialize your component with.
Provide Function	provide()	Holds a list of properties that you want to provide to descendent components.
Prop Object	prop:{}	Stubs out an object that contains reactive properties that you want to receive from your component's parents.
Computed Properties Object	computed:{}	Stubs out an object that contains reactive computed properties.
Computed Property Object	compute:{}	Stubs out an object that contains a single reactive computed property.
Methods Object	methods:{}	Stubs out an object that contains all of the methods you want your component to expose to its template.
Method	method()	Stubs out a single method.
Watchers Object	watchers:{}	Stubs out an object that contains all of the properties you want to watch for changes.
Watcher	watcher:{}	Stubs out an object that contains the function you want to run when a property changes.
Emits Object	emits:{}	Stubs out an object that contains the custom events you want your component to emit.
Emit Object	emit:{}	Stubs out an object that defines a custom event.
Render Function	render()	Stubs out a function that renders your component's template. This function replaces any template your component has.
Directives Object	directives:{}	Stubs out an object that contains all of the custom directives you want your component to have.
Directive	directive()	Stubs out a custom directive.
Lifecycle Hook Functions	lifecycleHooks	Stubs out all of your component's lifecycle hooks.

Vue 3 Composition API

Function	Clip	What it does:
Setup Function	setup()	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.
InjectionKey Function	const key =	Stubs out a symbol which uniquely identifies an injected item.
Provide Function	provide()	Stubs out a function that makes a property available to every descendent of your component.
Inject Function	const inject =	Stubs out a statement which injects an item that an ancestor provides your component.
Computed Property Function	computed()	Stubs out a function that defines a reactive computed property.
WatchEffect Function	watchEffect()	Stubs out a function that defines a callback that runs when a property changes.
Watch Function	watch()	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.
OnBeforeMount Function	onBeforeMount()	Stubs out a function that runs code before your component is mounted.
onMounted Function	onMounted()	Stubs out a function that runs code as soon as your component is mounted.
onBeforeUpdate Function	onBeforeUpdate()	Stubs out a function that runs code before your component is patched with changes to the DOM.
onUpdated Function	onUpdated()	Stubs out a function that runs code as soon as your component is patched with changes to the DOM.
onActivated Function	onActivated()	Stubs out a function that runs code when your kept-alive component is activated.
onDeactivated Function	onDeactivated()	Stubs out a function that runs code before your kept-alive component is deactivated.
onBeforeUnmount Function	onBeforeUnmount()	Stubs out a function that runs code before your component is unmounted.
onUnmounted Function	onUnmounted()	Stubs out a function that runs code as soon as your component is unmounted.
onErrorCaptured Function	onErrorCaptured()	Stubs out a function that runs code whenever an error occurs in your component.
onRenderTracked Function	onRenderTracked()	Stubs out a function that runs code as soon as your component is rendered.
onRenderTriggered Function	onRenderTriggered()	Stubs out a function that runs code as soon as a change elsewhere in the Virtual DOM triggers a re-render of your component.

Vue 3 Docgen Tags

Section	Clip	What it does:
component	/component	Describes the purpose and behavior of the component. Place it directly above a component's export default statement.

Tag	Clip	What it does:
@values	@values	Lists the values a prop can take.
@event	@event	Lists the event(s) that the are $emit(...)ed by the method or watcher it documents.
@example	@example	Shows an example of how to use the code it documents.
@deprecated	@deprecated	Deprecates the code it documents, and links to the replacement code.
@see	@see	Links to another section of the documentation, or to a website.
@link	@link	Links to another section of the documentation, or to a website.
@author	@author	List the name and author of the person who wrote the code.
@since	@since	Lists the version that the code it documents first appeared in the codebase.
@version	@version	Lists the current semantic version of the code it documents.
@ignore	@ignore	Excludes the documentation from autogenerated documentation sites.
@param	@param	Describes the values that the method it documents accepts for an argument.
@slot	@slot	Describes what can be inserted into the slot of the template it documents.
@binding	@binding	Describes the values a property of the scoped slot it documents can have.

Version 0.1

Initial release.

Version 0.1.1

Add README.

Version 0.1.2

Update tab stops for clips. Update names of clips in group Vue 3 Docgen API.

Version 0.1.3

Add commas to end of objects for clips in Vue 3 Options API.

Version 0.1.4

Improve description of Vue 3 Docgen Tags. Add documentation syntax to clips in Vue 3 Options API and Vue 3 Composition API.

Version 0.1.5

Change order of tab stops in Vue 3 Options API > Vue 3 Prop.

Version 0.1.6

Add /component clip, which stubs out documentation that you can put at the root of a component. Update README.

Version 0.1.7

Make /component clip available in Vue files.

Version 0.1.8

Change trigger for Vue 3 Slot Tag to @slot.

Version 0.1.9

Change code fence language in Vue 3 Example Tag from typescript to vue.

Version 0.1.10

Add @event vue docgen tag.

Version 0.1.11

Fix typo in @event vue docgen tag.

Version 0.1.12

Fix another typo in @event vue docgen tag.

Version 0.1.13

Fix typo in @see vue docgen tag.

Version 0.1.14

Update icon.