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-link`element with `:to` directive and a span
`nuxt-link`	A `nuxt-link`element with `:to` directive and a span

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request

Contributors

Kaan Gökdemir - Maintainer (@kaangokdemir) - kaangokdemir.com

License

MIT

vue-pug-snippets

Kaan Gokdemir