Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaangokdemir/vue-pug-snippets
VS Code Snippets for Vue files with Pug.js
https://github.com/kaangokdemir/vue-pug-snippets
pug vscode vscode-extension vue vue-pug-snippets
Last synced: 17 days ago
JSON representation
VS Code Snippets for Vue files with Pug.js
- Host: GitHub
- URL: https://github.com/kaangokdemir/vue-pug-snippets
- Owner: kaangokdemir
- License: mit
- Created: 2020-03-15T15:11:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T22:10:11.000Z (over 1 year ago)
- Last Synced: 2024-10-18T02:23:33.709Z (28 days ago)
- Topics: pug, vscode, vscode-extension, vue, vue-pug-snippets
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=kaangokdemir.vue-pug-snippets
- Size: 243 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Pug Snippets
[](https://vsmarketplacebadge.apphb.com/version-short/kaangokdemir.vue-pug-snippets.svg) [](https://vsmarketplacebadge.apphb.com/installs-short/kaangokdemir.vue-pug-snippets.svg) [](https://vsmarketplacebadge.apphb.com/downloads-short/kaangokdemir.vue-pug-snippets.svg) [](https://vsmarketplacebadge.apphb.com/rating-short/kaangokdemir.vue-pug-snippets.svg)
## Description
This is a VS Code snippet extension for `.vue` files with Pug.js templating. There are more than 32 extensions/options for creating your single file components' base and 16+ snippets which you can use in your template fields at your `.vue` files
## Installation
#### First way
- Open VS Code
- ⇧ + ⌘ + X (Mac - Linux)
⇧ + ctrl + X (Windows)
- Type `vue-pug-snippets` and install the snippet by `Kaan Gökdemir`
#### Second way
- Download from [VS Code Extensions Marketplace](https://marketplace.visualstudio.com/items?itemName=kaangokdemir.vue-pug-snippets)
#### Third way
- `ext install vue-pug-snippets`
## Supported Languages (file extensions)
- Vue.JS - `.vue`
## Snippets Logic
## Snippet List
### Base Snippets
| Snippet | Base Component with ... |
| -------------------------- | ----------------------------------------------------------- |
| `vpug` | Vue + Pug |
| `vpug-scoped` | Vue + Pug + Scoped |
| `vpug-scss` | Vue + Pug + Scss |
| `vpug-sass` | Vue + Pug + Sass |
| `vpug-scss-scoped` | Vue + Pug + Scss + Scoped |
| `vpug-sass-scoped` | Vue + Pug + Sass + Scoped |
| `vpug-less` | Vue + Pug + Less |
| `vpug-less-scoped` | Vue + Pug + Less + Scoped |
| `vpug-stylus` | Vue + Pug + Stylus |
| `vpug-stylus-scoped` | Vue + Pug + Stylus + Scoped |
| `vpug-cc` | Vue + Pug + Class Component |
| `vpug-cc-scoped` | Vue + Pug + Class Component + Scoped |
| `vpug-cc-scss` | Vue + Pug + Class Component + Scss |
| `vpug-cc-sass` | Vue + Pug + Class Component + Sass |
| `vpug-cc-scss-scoped` | Vue + Pug + Class Component + Scss + Scoped |
| `vpug-cc-sass-scoped` | Vue + Pug + Class Component + Sass + Scoped |
| `vpug-cc-less` | Vue + Pug + Class Component + Less |
| `vpug-cc-less-scoped` | Vue + Pug + Class Component + Less + Scoped |
| `vpug-cc-stylus` | Vue + Pug + Class Component + Stylus |
| `vpug-cc-stylus-scoped` | Vue + Pug + Class Component + Stylus + Scoped |
| `vpug-dc` | Vue + Pug + Define Component |
| `vpug-dc-scoped` | Vue + Pug + Define Component + Scoped |
| `vpug-dc-scss` | Vue + Pug + Define Component + Scss |
| `vpug-dc-sass` | Vue + Pug + Define Component + Sass |
| `vpug-dc-scss-scoped` | Vue + Pug + Define Component + Scss + Scoped |
| `vpug-dc-sass-scoped` | Vue + Pug + Define Component + Sass + Scoped |
| `vpug-dc-less` | Vue + Pug + Define Component + Less |
| `vpug-dc-less-scoped` | Vue + Pug + Define Component + Less + Scoped |
| `vpug-dc-stylus` | Vue + Pug + Define Component + Stylus |
| `vpug-dc-stylus-scoped` | Vue + Pug + Define Component + Stylus + Scoped |
| `vpug-ts` | Vue + Pug + TypeScript |
| `vpug-ts-scoped` | Vue + Pug + TypeScript + Scoped |
| `vpug-ts-scss` | Vue + Pug + TypeScript + Scss |
| `vpug-ts-sass` | Vue + Pug + TypeScript + Sass |
| `vpug-ts-scss-scoped` | Vue + Pug + TypeScript + Scss + Scoped |
| `vpug-ts-sass-scoped` | Vue + Pug + TypeScript + Sass + Scoped |
| `vpug-ts-less` | Vue + Pug + TypeScript + Less |
| `vpug-ts-less-scoped` | Vue + Pug + TypeScript + Less + Scoped |
| `vpug-ts-stylus` | Vue + Pug + TypeScript + Stylus |
| `vpug-ts-stylus-scoped` | Vue + Pug + TypeScript + Stylus + Scoped |
| `vpug-ts-cc` | Vue + Pug + TypeScript + Class Component |
| `vpug-ts-cc-scoped` | Vue + Pug + TypeScript + Class Component + Scoped |
| `vpug-ts-cc-scss` | Vue + Pug + TypeScript + Class Component + Scss |
| `vpug-ts-cc-sass` | Vue + Pug + TypeScript + Class Component + Sass |
| `vpug-ts-cc-scss-scoped` | Vue + Pug + TypeScript + Class Component + Scss + Scoped |
| `vpug-ts-cc-sass-scoped` | Vue + Pug + TypeScript + Class Component + Sass + Scoped |
| `vpug-ts-cc-less` | Vue + Pug + TypeScript + Class Component + Less |
| `vpug-ts-cc-less-scoped` | Vue + Pug + TypeScript + Class Component + Less + Scoped |
| `vpug-ts-cc-stylus` | Vue + Pug + TypeScript + Class Component + Stylus |
| `vpug-ts-cc-stylus-scoped` | Vue + Pug + TypeScript + Class Component + Stylus + Scoped |
| `vpug-ts-dc` | Vue + Pug + TypeScript + Define Component |
| `vpug-ts-dc-scoped` | Vue + Pug + TypeScript + Define Component + Scoped |
| `vpug-ts-dc-scss` | Vue + Pug + TypeScript + Define Component + Scss |
| `vpug-ts-dc-sass` | Vue + Pug + TypeScript + Define Component + Sass |
| `vpug-ts-dc-scss-scoped` | Vue + Pug + TypeScript + Define Component + Scss + Scoped |
| `vpug-ts-dc-sass-scoped` | Vue + Pug + TypeScript + Define Component + Sass + Scoped |
| `vpug-ts-dc-less` | Vue + Pug + TypeScript + Define Component + Less |
| `vpug-ts-dc-less-scoped` | Vue + Pug + TypeScript + Define Component + Less + Scoped |
| `vpug-ts-dc-stylus` | Vue + Pug + TypeScript + Define Component + Stylus |
| `vpug-ts-dc-stylus-scoped` | Vue + Pug + TypeScript + Define Component + Stylus + Scoped |
### Template Snippets
#### Works inside `` or in your `.pug` files
| Snippet | What it creates |
| ------------- | ------------------------------------------------------ |
| `vfor` | A `v-for` block |
| `v-for` | An inline `v-for` statement |
| `v-for-ik` | An inline `v-for` statement with index and key |
| `vmodel` | A block with `v-model` directive |
| `input` | An `input` block with `v-model` directive |
| `vprop` | A custom component with a prop |
| `vimg` | An image block with binded source and alt |
| `:src` | `:src` directive with an alt text |
| `:style` | A style binding directive |
| `:style-obj` | Binded two style objectives in an array |
| `:class` | A binded class directive |
| `transition` | A transition block with `name` and `mode` |
| `router-link` | A `router-link`element with `:to` directive and a span |
| `nuxt-link` | A `nuxt-link`element with `:to` directive and a span |
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request
## Contributors
Kaan Gökdemir - Maintainer ([@kaangokdemir](https://twitter.com/kaangokdemir)) - [kaangokdemir.com](https://kaangokdemir.com)
## License
MIT