Vue 3 Snippet (Visual Studio Code)

中文

Code snippets for Vue (v3.x) + Vue Router (v4.x).

Design

Vue 2 and 3 Template Directives are the same (vscode-vue-basic-snippets).

Vue 2 and 3 have relatively large changes, 2 recommends the Optional paradigm, and 3 recommends the Composition Functions paradigm. The commonly used "Global API, Directives, Transition, Async Components, Instance Events, Lifecycle" in Vue have undergone major changes. And Router/VueX also launched 4 versions.

In addition, with the introduction of new features of "reactive refs" and "Teleport", the upgrade of many community resources will be major changes.

Therefore, it is not good to design Vue 2 and 3 Code Snippets together.

It is best to separate the Code Snippets of Vue 2 and 3 respectively. According to the actual situation in the project, select Disable (Workspace) in the extension. If you feel this is more cumbersome, you can install the extension supported by version 2 in "VS Code" , Install the extensions supported by version 3 in "VS Code-Insiders".

Install

🌈🌈🌈 Also need to install:

• Vue Basic Snippets, Contains code for the v-* family of directives, import components, directives, and services common to Vue 2 and 3.
• Vue 2 Snippets, For Vue 2.
• Pinia Snippets, For Pinia.
• VueX Snippets, For VueX.
• JavaScript Code Snippet, Reference MDN documentation.
• JavaScript Comment Snippet, Reference JSDOC, ESDOC documentation.

Supported languages

• JavaScript (.js)
• JSX (.jsx)
• TypeScript (.ts)
• Vue (.vue)

Snippets

Looking at the source code, the source code files are layered, very clear, better than the document description, and roughly what are the prefix.

License 📃

MIT License

Donate