VUE setup with vuex, vue-router

Before start on setup i’m going to explain what is VUE
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications.
Basic example to create component
<template>
<transition name="el-zoom-in-top">
<!-- Main content -->
<section class="dashboard">
<div class="container">
<h1 class="text-center">Dashboard</h1>
<div class="row">
<div class="col-md-12 text-center" style="margin-bottom: 20px;">
<button class="btn btn-success" @click="sweetAlert">Test Sweet alert</button>
</div>
<div class="col-md-12 text-center">
<button class="btn btn-primary" @click="testToast">Test toast</button>
</div>
</div>
</div>
</section>
<!-- /.content -->
</transition>
</template>
<script>
import sweetalert from 'sweetalert'
export default {
name: 'dashboard-first',
methods: {
sweetAlert: function () {
sweetalert('success!', 'This is success Message', 'success')
},
testToast: function () {
this.$toasted.show('This is toast')
}
}
}
</script>Here is github link for vue setup
I have integrate some other important libraries which are useful to build any project, libraries as follow
VUE-ROUTER

I have use multiple folders like components, container, actions. in container folder there are files for actual pages like signup, login, dashboard etc. In components folder there are helping components files and files to interact with store, third party APIs call are take place in actions folder.
here is routing file in my vue setup
VUEX
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralised store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Basic code for managing store
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)const state = {
token: null,
list: []
}const mutations = {
SET_TOKEN (state, token) {
console.log(state, token)
state.token = token
},
REMOVE_TOKEN (state) {
state.token = null
},
GET_LIST (state, list) {
state.list = list
}
}export default new Vuex.Store({
state,
mutations
})
We use mutations and state in vuex store, to get store’s states in action import store file in action file then use “store.state.stateVariableName” and to hit mutation in store to manipulate store state elements use “store.commit(‘SET_USER_AUTH’, authData)”
Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
SAAS
Sass (Syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. … Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.
Some other useful components used in my vue setup
SweetAlert, AXIOS, vue-toasted, element-ui, vue-animate-number, vuebars
To Run setup from github firstly clone the project from github then use following commands
for clone
git clone https://github.com/Rupinderthind/vue_basic_demo.gitto run the project
npm install
npm run devfor make build run
npm run buildto run build
serve -s dist/
