<template>
    <div id="my-app">
        <header-bar :user="username"/>
        <app-loader v-if="loading" />
        </custom-content v-else />
    </div>
</template>
<script>
import { HeaderBar, AppLoader, CustomContent } from '../components'
export default {
    name: 'MyApp',
    components: { HeaderBar, AppLoader, CustomContent }
    data() {
        return {
            loading: true,
            user: {}
        }
    },
    computed: {
        username() {
            return `${this.firstname} ${this.lastname}`
        }
    },
    async mounted() {
        this.user = await fetchUser()
    }
}
</script>
<style>
    #my-app {
        width: 100vw; height: 100vh;
    }
</style>

const themeMixin = {
    props: {
        light: {
            type: Boolean,
            default: true
        },
        dark: {
            type: Boolean,
            default: false
        }
    }
    computed: {
        computedThemeClasses() {
            return {
                ['theme-' + this.light]: this.light,
                ['theme-' + this.dark]: this.dark,
            }
        }
    }
}

export default themeMixin

<template>
    <div :class="computedThemeClasses">
        ...
    </div>
</template>

<script>
import themeMixin from '../mixins';

export default {
    name: 'MyComponent',
    mixins: [themeMixin]
}

</script>

Vue.mixin({
  created: function () {
    var theme = this.$options.theme
    if (theme) {
        ...
    }
  }
})

new Vue({
  theme: 'dark'
})

Vue.config.optionMergeStrategies.theme = (toVal, fromVal) => {
    const allowedThemes = ['default', 'light', 'dark'];

    if (!allowedThemes.includes(toVal)) {
        return 'default';
    }

    return toVal;
}

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import LoginPage from './pages/Login'
import DashboardPage from './pages/Dashboard'

const  UsersList = () => import('./pages/Users')
const  ProjectsList = () => import(/* webpackChunkName: "page-projects" */ './pages/Projects')

const routes = [
  { path: '/login',     component: LoginPage    },
  { path: '/dashboard', component: Dashboard    },
  { path: '/users',     component: UsersList    },
  { path: '/projects',  component: ProjectsList }
]

const router = new VueRouter({
    routes // short for `routes: routes`
})

new Vue({
    //...
    router
})

const routes = [
    {
        path: '/user/:id',
        component: UserPage,
        children: [
            {
                path: '', /* path: /users/:id: */
                component: UserHomePage,
            },
            {
                path: 'profile', /* path: /users/:id:/profile */
                component: UserProfilePage,
                name: 'user.profile',
                props: true
            },
            {
                path: 'notifications', /* path: /users/:id:/notifications */
                component: UserNotificationsPage,
                children: [
                    {
                        path: ':nid', /* path: /users/:id:/notifications/:nid */
                        component: UserNotificationPage
                    }
                ]
            }
        ]
    },
]

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/users">Users</router-link>
        <router-link to="/dashboard">Dashboard</router-link>
    </p>
    <!-- component matched by the route will render here -->
    <router-view></router-view>
</div>

<router-link to="/users">Users</router-link>
Rendered as: <a href="...">Users</a>

<router-link tag="button" to="/dashboard">Dashboard</router-link>
Rendered as: <button>Dashboard</button>

<router-link :to="{ name: 'user.profile', params: { id: 1 }}">
    User #1
</router-link>

<template>
    <div>
        {{ $route.name }}
        {{ $route.params.id }} === {{ id }}
    </div>
</template>


<script>
export default {
    name: 'UserProfile',
    props: ['id'],
    mounted() {
        let userId = this.$route.params.id
        // or use this.id      
        // fetchUserProfileData ?
    },
    methods: {
        onNotificationTabClicked(nid) {
            this.$router.push({
                name: 'user.notification.single',
                params: { nid }
            })
        }
    }
}
</script>

<template>
    <div id="myapp">
        <header>
            <router-view name="header"></router-view>
        </header>
        <router-view></router-view>
    </div>
</template>

const routes = [
    {
        path: '/user/:id',
        components: {
            default: UserPage,
            header: UserPageHeader
        }
    }
]

<template>
    <div id="myapp">
        <header>
            <router-view name="header">
            </router-view>
        </header>
        <router-view></router-view>
    </div>
</template>

export default {
    template: `...`,
    beforeRouteEnter (to, from, next) {
        // called before the route that renders this component is confirmed.
        // does NOT have access to `this` component instance,
        // because it has not been created yet when this guard is called!
    },
    beforeRouteUpdate (to, from, next) {
        // called when the route that renders this component has changed,
        // but this component is reused in the new route.
        // For example, for a route with dynamic params `/foo/:id`, when we
        // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
        // will be reused, and this hook will be called when that happens.
        // has access to `this` component instance.
    },
    beforeRouteLeave (to, from, next) {
        // called when the route that renders this component is about to
        // be navigated away from.
        // has access to `this` component instance.
    }
}

<transition name="fade">
    <router-view></router-view>
</transition>

import Vuex from 'vuex'

Vue.use(Vuex)

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

const store = new Vuex.Store({
    state: {
        count: 0,
        users: [],
        user: {
            id: '',
            ...
        },
        auth: {
            expiredAt: null
            token: null
        }
    }
})

const store = new Vuex.Store({
    ...
    actions: {
        increment (context) {
            context.commit('increment')
        },
        decrement ({commit, dispatch, store, rootStore}) {
            if (store.count > 0) {
               commit('increment')
            }
        },
        setCount ({commit}, payload) {
           commit('setCount' parseInt(payload.count))
        },
        setCount2 ({commit}, {count}) {
           commit('setCount' parseInt(count))
        },
        setAsyncCount ({commit}, {count}) {
            return new Promise((resolve, reject) => {
                api.setCount(count).then(() => {
                    commit('setCount' parseInt(count))
                    resolve()
                ).catch((error) => {
                    reject(error.message)
                })
            })
        }
    }
})

import { mapActions } from 'vuex'

export default {
    name: 'MyComponent',
    methods: {
        ...mapActions([
            'increment',
            'setCount' /* map `this.setCount(count)` */
        ])
    },
    mounted() {
        this.$store.dispatch('increment')
        this.$store.dispatch('setCount', 50)

        this.$store.dispatch('setAsyncCount', 50)
            .then(() => {
                ...
            }).catch(err => {
                alert(err)
            })
    }
}

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

import { mapMutations } from 'vuex'

export default {
    name: 'MyComponent',
    methods: {
        ...mapMutations([
            'increment',
            'setCount' /* map `this.setCount(count)` */
        ])
    },
    mounted() {
        this.$store.commit('increment')
        this.$store.commit('setCount', 50)
    }
}

export default {
    name: 'MyComponent',
    computed: {
        getCount () {
            return this.$store.state.count
        }
    }
}

const store = new Vuex.Store({
    ...
    getters: {
        count: state => state.count,
        isEmpty : state => {
            return state.count > 0
        },
        allNotifications: state => state.notifications,
        notificationsCount: state => state.notifications.length,
        unreadNotifications: state => {
            return _.filter(state.notifications, {'active', true})
        },
        readNotifications: state => {
            return _.filter(state.notifications, {'active', false})
        },
        blueNotifications: state => {
            return _.filter(state.notifications, {'blue', true})
        }
    }
})

import { mapGetters } from 'vuex'

export default {
    name: 'MyComponent',
    computed: {
        ...mapGetters([
            'count',
            'isEmpty',
            'unreadNotifications'
        ]),
        formatNotifications() {
            return _.map(this.unreadNotifications, (notification) => {
                return {
                    id: notification._id,
                    title: notification.name,
                    date: this.$moment(notification.ts).format('LLLL')
                }
            });
        }
    }
}

<template>
    <my-custom-list :list="items" @item-selected="onItemSelected" />
</template>
<script>

export default {
    name: 'MyWrapper',
    data() {
        return {
            items: []
        }
    },
    methods: {
        onItemSelected(item) {
            ...

            this.$parent.$parent.itemSelected(item)
            /* 😱😨😰😓🤔🤫😈☠😡 */
        }
    }
}
</script>

import Vue from 'vue'
export const eventHub = new Vue();

import eventHub from './eventhub'

export default {
    ...
    methods: {
        action(items) {
             eventHub.$emit('dispatch-data', items)
        }
    }
}

import eventHub from './eventhub'

export default {
    ...
    mounted() {
        eventHub.$on('dispatch-data', (items) => {
            this.items = items
        })
    }
}

<template>
    <my-custom-item v-model="model" />
</template>

<script>

export default {
    name: 'MyWrapper',
    data() {
        return {
            model: 'test'
        }
    }
}
</script>

export default {
    name: 'MyCustomItem',
    props: {
        value: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            myValue: ''
        }
    },
    mounted() {
        this.myValue = this.value
    },
    methods: {
        onValueChanged(newValue) {
            this.$emit('input', newValue)
        }
    },
    watch: {
        value: (newVal, oldVal) {
            if (newVal !== oldVal) {
                this.$emit('input', newValue)
            }
        }
    }
}

import MyDirective from './directives/myDirective'
import themeMixin from './mixins/themeMixin'
import MyCustomList from './components/MyCustomList'

const MyPlugin = {}

MyPlugin.install = function (Vue, options) {

  Vue.myGlobalMethod = function () {
    // something logic ...
  }

  Vue.directive('my-directive', MyDirective)
  Vue.component('my-custom-list', MyCustomList)

  Vue.mixin(themeMixin)

  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

export default MyPlugin

import MyPlugin from './plugins/myPlugin'

Vue.use(MyPlugin)


Vue.use(MyPlugin, { ... options })

// counter.js

export default {
  template: `
    <div>
      <span class="count">{{ count }}</span>
      <button @click="increment">Increment</button>
    </div>
  `,

  data () {
    return {
      count: 0
    }
  },

  methods: {
    increment () {
      this.count++
    }
  }
}

// test.js

// Import the `mount()` method from the test utils
// and the component you want to test
import { mount } from '@vue/test-utils'
import Counter from './counter'

// Now mount the component and you have the wrapper
const wrapper = mount(Counter)

// You can access the actual Vue instance via `wrapper.vm`
const vm = wrapper.vm

// To inspect the wrapper deeper just log it to the console
// and your adventure with the Vue Test Utils begins
console.log(wrapper)

import { mount } from '@vue/test-utils'
import Counter from './counter'

describe('Counter', () => {
      // Now mount the component and you have the wrapper
      const wrapper = mount(Counter)

      it('renders the correct markup', () => {
            expect(wrapper.html()).toContain('<span class="count">0</span>')
      })

      // it's also easy to check for the existence of elements
      it('has a button', () => {
            expect(wrapper.contains('button')).toBe(true)
      })

    it('button click should increment the count', () => {
        expect(wrapper.vm.count).toBe(0)
        const button = wrapper.find('button')
        button.trigger('click')
        expect(wrapper.vm.count).toBe(1)
    })
})

import { shallowMount } from '@vue/test-utils'
import Counter from './counter'

const wrapper = shallowMount(Counter)
wrapper.vm // the mounted Vue instance

wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)

expect(wrapper.emitted().foo).toBeTruthy()
expect(wrapper.emitted().foo.length).toBe(2)
expect(wrapper.emitted().foo[1]).toEqual([123])

wrapper.setData({ count: 10 })
wrapper.setProps({ foo: 'bar' })

wrapper.trigger('click')
wrapper.find('button').trigger('click')

import { createLocalVue } from '@vue/test-utils'

// create an extended `Vue` constructor
const localVue = createLocalVue()

// install plugins as normal
localVue.use(MyPlugin)

// pass the `localVue` to the mount options
mount(Component, {
  localVue
})

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

Vue.use(Vuex)

// extract js files inside modules folder
const requireModule = require.context('./modules', true, /index\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
  const moduleName = fileName.replace(/(\.\/|\/index\.js)/g, '')
  modules[moduleName] = requireModule(fileName).default
})

const store = new Vuex.Store({
  modules
})

export default store

vueConfig.pages = {
    index: {
        entry: 'src/main.js',
        template: 'public/index.html',
        filename: 'index.html',
        title: 'MyApplication',
        chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
}
vueConfig.outputDir = 'www'

const cordovaLoader = (cb) => {
  appendCordovaScript();
  document.addEventListener('deviceready', () => {
    cb();
    setTimeout(() => {
      navigator.splashscreen.hide();
    }, 200)
  })
}

const appendCordovaScript = () => {
  const hasAlready = document.URL.indexOf('http') !== 0 || window.hasOwnProperty('cordova');
  if (hasAlready) {
    return;
  }
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = getCordovaUrl();
  document.head.appendChild(script);
}

const getCordovaUrl = () => {
  return 'cordova.js';
}

export default cordovaLoader

....
import cordovaLoader from './cordovaLoader'

cordovaLoader(() => {

    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
});