Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Vue 3 SnippetsNew to Visual Studio Code? Get it now.

Vue 3 Snippets

NicholasHsiang

|
9,751 installs
| (3) | Free
Code snippets for Vue 3
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

xianghongai@gmail.com

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft