Vue.js Snippets

Vue.js Snippets for Atom

Types

• .text.html.vue
• .text.js

Snippets

Vue Component

prefix: template body:

<template>
  <div id='YourComponentName'>
    <!--You component contents goes here-->
  </div>
</template>
<script>
  export default {
    name: "YourComponentName",
    data(){
      return {
        //Component Data
        example: true,
        foo: "bar"
      }
    },

    created(){
      //On Component created
    },

    methods: {
      functionExample(){
        //Basic Component method
      }
    }
  }
</script>

Vue Router

Router

prefix: router body:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    name: "YourRouteName",
    path: "/",
    component: YourComponent
  }
]

export const router = new VueRouter({
  routes: routes,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

Vue filter

New Filter

prefix: filter body:

Vue.filter('yourfiltername', (value) => {
  return true
})

Vue Resource

Get

prefix: get

body:

this.$http.get(URL).then((result) => {

  }, (error) => {

  })
})

Post

prefix: post

body:

this.$http.post(URL, PARAMS).then((response) => {

  }, (error) => {

  })

Put

prefix: put

body:

this.$http.put(URL, PARAMS).then((response) => {

  }, (error) => {

  })

Delete

prefix: delete

body:

this.$http.delete(URL, PARAMS).then((response) => {

  }, (error) => {

  })