import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>​

Count is: 0

<button v-if="isLoggedIn">Logout</button>

<template v-if="isLoggedIn">
  <label> Logout </button>
  <button> Logout </button>
</template>

<button v-if="isLoggedIn"> Logout </button>
<button v-else> Log In </button>

<button v-if="isLoggedIn"> Logout </button>
<label v-else-if="isLoginDisabled"> User login disabled </label>
<button v-else> Log In </button>

<span v-show="user.name">Welcome user,{{user.name}}</span>

<ul id="list">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

var vm = new Vue({
  el: '#list',
  data: {
    items: [
      { message: 'John' },
      { message: 'Locke' }
    ]
  }
})

<div id="object">
  <div v-for="(value, key, index) of user">
    {{ index }}. {{ key }}: {{ value }}
  </div>
</div>

var vm = new Vue({
  el: '#object',
  data: {
    user: {
      firstName: 'John',
      lastName: 'Locke',
      age: 30
    }
  }
})

var vm = new Vue({
  // options
})

$ yarn add vue-resource  
$ npm install vue-resource   

<template v-if="condition">
  <h1>Name</h1>
  <p>Address</p>
  <p>Contact Details</p>
</template>

<div id="app">  
  {{message}}  
  <input v-model="message">  
</div>  
<script type="text/javascript">  
  var message = 'Vue.js is rad';  
  new Vue({ el: '#app', data: { message } });  
</script>

<element directive="expression | filterId [args...]"></element>

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

<alert>
  There is an issue with in application.
</alert>

<template v-if="loginType === 'Admin'">
  <label>Admin</label>
  <input placeholder="Enter your ID">
</template>
<template v-else>
  <label>Guest</label>
  <input placeholder="Enter your name">
</template>

    <template v-if="loginType === 'Admin'">
      <label>Admin</label>
      <input placeholder="Enter your ID" key="admin-id">
    </template>
    <template v-else>
      <label>Guest</label>
      <input placeholder="Enter your name" key="user-name">
    </template>

<div v-for="item in items" :key="item.id">
  {{item.name}}
</div>

vm.todos.push({ message: 'Baz' })

vm.todos = vm.todos.filter(function (todo) {
  return todo.status.match(/Completed/)
})

Vue.component('blog-post', {  
  // camelCase in JavaScript  
  props: ['postTitle'],  
  template: '<h3>{{ postTitle }}</h3>'  
})​

npm install vuex --save
(or)
yarn add vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

<script src="https://unpkg.com/vue.js"></script>
<script src="https://unpkg.com/vuex.js"></script>

const moduleOne = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleTwo = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    one: moduleOne,
    two: moduleTwo
  }
})

store.state.one // -> `moduleOne's state
store.state.two // -> `moduleTwo's state

npm install axios --save  
Implementing GET method using Axios in Vue JS  
axios({ method: "GET", "URL": "https://httpbin.org/ip" }).then(result => {  
                this.ip = result.data.origin;  
            }, error => {  
                console.error(error);  
            });​

vue init webpack myproject  

npm run build  

<div id="app">  
  Name: <input type="text" v-model="name">  
  <button v-on:click="myClickHandler">Say Hello button</button>  
</div>​

var myViewModel = new Vue({  
  el: '#app',  
  data: my Model,  
  // A click handler inside methods  
  methods: {  
    ClickHandler: function(e) {  
      alert("Hello " + this.name);  
    }  
  }  
 });  

vm.todos[indexOfTodo] = newTodo

vm.todos.length = todosLength

// Vue.set
Vue.set(vm.todos, indexOfTodo, newTodoValue)
(or)
// Array.prototype.splice
vm.todos.splice(indexOfTodo, 1, newTodoValue)

vm.todos.splice(todosLength)

var vm = new Vue({
  data: {
    user: {
      name: 'John'
    }
  }
})

// `vm.name` is now reactive

vm.user.email = john@email.com // `vm.user.email` is NOT reactive

Vue.set(vm.user, 'email', 'john@email.com');
// (or)
vm.user = Object.assign({}, vm.user, {
  email: john@email.com
})

<button v-on:click="show('Welcome to VueJS world', $event)">
  Submit
</button>

methods: {
  show: function (message, event) {
    // now we have access to the native event
    if (event) event.preventDefault()
    console.log(message);
  }
}

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="methodCall"></a>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- only call `vm.show()` when the `keyCode` is 13 -->
<input v-on:keyup.13="show">

<input v-on:keyup.enter="submit" />
<!-- OR with shorthand notation -->
<input @keyup.enter="submit" />

Vue.config.keyCodes = {
  f1: 112,
  "media-play-pause": 179,
  down: [40, 87]
}​

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<template>
   <div class="todo-item">
       <h2>{{ title }}</h2>
       <div v-html="content"></div>
   </div>
</template>

<template>
     <h2>{{ title }}</h2>
     <div v-html="content"></div>
</template>

Vue.component('todo-item', {
  props: ['todo'],
  template: `
    <div class="todo-item">
      <h3>{{ todo.title }}</h3>
      <button v-on:click="$emit('increment-count', 1)">
        Add
      </button>
      <div v-html="todo.description"></div>
    </div>
  `
})

<ul v-for="todo in todos">
  <li>
    <todo-item
      v-bind:key="todo.id"
      v-bind:todo="todo"
      v-on:increment-count="total += 1"
    /></todo-item>
  </li>
</ul>
<span> Total todos count is {{total}}</span>

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  `
})

<custom-input v-model="searchInput"></custom-input>

import ComponentA from './ComponentA'
import ComponentB from './ComponentB'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  // ...
}

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // The relative path of the components folder
  './components',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // Get component config
  const componentConfig = requireComponent(fileName)

  // Get PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // Strip the leading `./` and extension from the filename
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // Register component globally
  Vue.component(
    componentName,
    // Look for the component options on `.default`, which will
    // exist if the component was exported with `export default`,
    // otherwise fall back to module's root.
    componentConfig.default || componentConfig
  )
})

var ComponentA = {/*.......*/}   
var ComponentB = {/*.......*/}   
var ComponentC = {/*.......*/}  

new Vue({  
el: '#app',  
components: {  
'component-a': ComponentA,  
'component-b': ComponentA  
}  
})  

<!-- synced after "change" instead of "input" -->  
<input v-model.lazy="msg" >   

<input v-model.number="age" type="number">  ​

<input v-model.trim="msg">  

props: ['defaultUser'],
data: function () {
  return {
    username: this.defaultUser
  }
}

props: ['environment'],
computed: {
  localEnvironment: function () {
    return this.environment.trim().toUpperCase()
  }
}

<custom-input data-tooltip="Enter your input" />

<!-- Child component -->
<input type="date" class="date-control">

<!-- Parent component -->
<custom-input class="custom-class" />

Vue.component('user-profile', {
  props: {
    // Basic type check (`null` matches any type)
    age: Number,
    // Multiple possible types
    identityNumber: [String, Number],
    // Required string
    email: {
      type: String,
      required: true
    },
    // Number with a default value
    minBalance: {
      type: Number,
      default: 10000
    },
    // Object with a default value
    message: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function
      default: function () {
        return { message: 'Welcome to Vue' }
      }
    },
    // Custom validator function
    location: {
      validator: function (value) {
        // The value must match one of these strings
        return ['India', 'Singapore', 'Australia'].indexOf(value) !== -1
      }
    }
  }
})

const User = {
  template: '<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>'
}

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:name/post/:postid', component: User }
  ]
})

filters: {  
  capitalize: function (value) {  
    if (!value) return ''  
    valuevalue = value.toString()  
    return value.charAt(0).toUpperCase() + value.slice(1)  
  }  
} ​

Vue.filter('capitalize', function (value) {  
  if (!value) return ''  
  valuevalue = value.toString()  
  return value.charAt(0).toUpperCase() + value.slice(1)  
})  
new Vue({  
  // ...  
})  

// in full builds helpers are exposed as Vuex.mapState  
import { mapState } from 'vuex'  
export default {  
  // ...  
  computed: mapState({  
    // arrow functions can make the code very succinct!  
    username: state => state.username,  
    // passing the string value 'username' is same as `state => state.username`  
    usernameAlias: 'username',  
    // to access local state with `this`, a normal function must be used  
     greeting (state) {  
      return this.localTitle + state.username  
    }  
  })  
}  

computed: mapState([  
  // map this.username to store.state.username  
  'username'  
])

mounted() {  
  this.chart = new PowerGraph();  
}  

beforeDestroy() {  
  this.chart.destroy();  
}  

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view> when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view> when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        },
          // UserHome will be rendered inside User's <router-view> when /user/:id is matched
        {  path: '',
           component: UserHome },
      ]
    }
  ]
})

{{ message | filterA | filterB | filterB ... }}

{{ birthday | dateFormat | uppercase }}

Vue.mixin({
  created(){
    console.log("Write global mixins")
  }
})

new Vue({
  el: '#app'
})

<div v-avatar="{ width: 500, height: 400, url: 'path/logo', text: 'Iron Man' }"></div>

Vue.directive('avatar', function (el, binding) {
  console.log(binding.value.width) // 500
  console.log(binding.value.height)  // 400
  console.log(binding.value.url) // path/logo
  console.log(binding.value.text)  // "Iron Man"
})

Vue.component('async-webpack-example', function (resolve, reject) {
  // Webpack automatically split your built code into bundles which are loaded over Ajax requests.
  require(['./my-async-component'], resolve)
})

<my-component inline-template>
   <div>
       <h1>Inline templates</h1>
       <p>Treated as component component owne content</p>
   </div>
</my-component>

//ComponentA
<div>
  <component-b >
</div>
//ComponentB
<div>
  <component-a >
</div>

beforeCreate: function () {
 this.$options.components.componentB = require('./component-b.vue').default
}

components: {
 componentB: () => import('./component-b.vue')
}

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

<template>
  <div class="greeting">{{ message }}</div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello world for vueloader!'
    }
  }
}
</script>

<style>
.greeting {
  color: blue;
}
</style>

<style scoped>
.greeting {
  color: green;
}
</style>

<template>
  <div class="greeting">Let's start Scoped CSS</div>
</template>

The above code will be converted to plain CSS,

<style scoped>
 .greeting[data-v-f3f3eg9] {
   color: green;
 }
</style>

<template>
   <div class="greeting" data-v-f3f3eg9>Let's start Scoped CSS</div>
</template>

// webpack.config.js
{
  module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: true,
              // customize generated class names
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

<style module>
.customStyle {
  background: blue;
}
</style>

<template>
  <div :class="$style.blue">
    Background color should be in blue
  </p>
</template>

<style module="a">
  /* identifiers injected as a */
</style>

<style module="b">
  /* identifiers injected as b */
</style>

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import myModule from './modules/myModule'

Vue.use(Vuex)

const state = { message: "Welcome to hot reloading" }

const store = new Vuex.Store({
  state,
  mutations,
  modules: {
    moduleA: myModule
  }
})

if (module.hot) {
  // accept actions and mutations as hot modules
  module.hot.accept(['./mutations', './modules/newMyModule'], () => {
    // Get the updated modules
    const newMutations = require('./mutations').default
    const newMyModule = require('./modules/myModule').default
    //swap in the new modules and mutations
    store.hotUpdate({
      mutations: newMutations,
      modules: {
        moduleA: newMyModule
      }
    })
  })
}

import Vuex from "vuex";
Vue.use(Vuex)

// Make sure to call Vue.use(Vuex) first if using a module system

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit('increment')

console.log(store.state.count) // -> 1

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Vue course', completed: true },
      { id: 2, text: 'Vuex course', completed: false },
      { id: 2, text: 'Vue Router course', completed: true }
    ]
  },
  getters: {
    completedTodos: state => {
      return state.todos.filter(todo => todo.completed)
    }
  }
})

import { mapGetters } from 'vuex'

export default {
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'completedTodos',
      'todosCount',
      // ...
    ])
  }
}

store.commit({
  type: 'increment',
  value: 20
})

Now the entire object will be passed as the payload to mutation handlers(i.e, without any changes to handler signature).

mutations: {
  increment (state, payload) {
    state.count += payload.value
  }
}

# use preset from GitHub repo
vue create --preset username/repo my-project

let version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}

// modify data
vm.msg = 'Welcome to Vue'
// DOM not updated yet
Vue.nextTick(function () {
  // DOM updated
})

// usage as a promise (2.1.0+)
Vue.nextTick()
  .then(function () {
    // DOM updated
  })

//i18n-setup.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@/lang/en'
import axios from 'axios'

Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',
  messages // set locale messages
})

const loadedLanguages = ['en'] // our default language that is preloaded

function setI18nLanguage (lang) {
  i18n.locale = lang
  axios.defaults.headers.common['Accept-Language'] = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function loadLanguageAsync (lang) {
  if (i18n.locale !== lang) {
    if (!loadedLanguages.includes(lang)) {
      return import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}`).then(msgs => {
        i18n.setLocaleMessage(lang, msgs.default)
        loadedLanguages.push(lang)
        return setI18nLanguage(lang)
      })
    }
    return Promise.resolve(setI18nLanguage(lang))
  }
  return Promise.resolve(lang)
}

router.beforeEach((to, from, next) => {
  const lang = to.params.lang
  loadLanguageAsync(lang).then(() => next())
})

npm install Vuetify

import Vue from 'vue'
import Vuetify from 'vuetify' // Import Vuetify to your project

Vue.use(Vuetify) // Add Vuetify as a plugin