Skip to content

Latest commit

 

History

History
141 lines (112 loc) · 8.96 KB

README.md

File metadata and controls

141 lines (112 loc) · 8.96 KB
Raw

Vue Pug Snippets

Version Install Downloads Ratings

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

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