Vue Pug Snippets

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

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 <template lang="pug"> 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-linkelement with :to directive and a span
nuxt-link	A nuxt-linkelement 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) - kaangokdemir.com

License

MIT