akobashikawa/About.js

## About.js
const About = Vue.component('about', {
  data() {
    return {
      hello: 'Hello About!'
    };
  },
  template: `<div>
      <v-card>
        <v-card-title>About</v-card-title>
        <v-card-text>
          <p>{{ hello }}</p>
          <counter></counter>
        </v-card-text>
      </v-card>
    </div>`
});

export default About;

## app.js
import router from './router.js';
import store from './store.js';

// common
import Counter from './Counter.js';

var app = new Vue({
  router,
  store,
  vuetify: new Vuetify(),
  data() {
    return {
      hello: 'Hello Vue!',
      drawer: false,
    };
  },
  computed: {
    ...Vuex.mapState(['counter'])
  }
}).$mount('#app');

## Counter.js
const Counter = Vue.component('counter', {
  computed: {
    ...Vuex.mapState(['counter'])
  },
  methods: {
    incCounter() {
      this.$store.commit('incCounter', 1);
    },
    decCounter() {
      this.$store.commit('decCounter', 1);
    }
  },
  template: `<div>
    <v-card outlined>
      <v-card-title>Counter</v-card-title>
      <v-card-text>
        <p>{{ counter }}</p>
      </v-card-text>
      <v-card-actions>
        <v-btn text icon color="cyan" @click="incCounter">
          <v-icon>add_circle</v-icon>
        </v-btn>
        <v-btn text icon color="red" @click="decCounter">
          <v-icon>remove_circle</v-icon>
        </v-btn>
      </v-card-actions>
    </v-card>
  </div>`
});

export default Counter;

## Home.js
const Home = Vue.component('home', {
  data() {
    return {
      hello: 'Hello Home!',
    };
  },
  template: `<div>
      <v-card>
        <v-card-title>Home</v-card-title>
        <v-card-text>
          <p>{{ hello }}</p>
          <counter></counter>
        </v-card-text>
      </v-card>
    </div>`
});

export default Home;

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>HTML5 + Vue + Router + Vuex + Vuetify</title>

  <style>
    [v-cloak]>* {
      display: none
    }

    [v-cloak]::before {
      content: "loading…"
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <v-app>
      <v-navigation-drawer app v-model="drawer">
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="title">
              Vue Simple App
            </v-list-item-title>
            <v-list-item-subtitle>
              Menu
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

        <v-list dense nav>
          <v-list-item router to="/">
            <v-list-item-icon>
              <v-icon>home</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>Home</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item router to="/about">
            <v-list-item-icon>
              <v-icon>info</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>About</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

      <v-app-bar app color="light-blue darken-1" dark>
        <v-app-bar-nav-icon @click.stop="drawer=!drawer"></v-app-bar-nav-icon>
        <v-toolbar-title>HTML5 + Vue + Router + Vuex + Vuetify</v-toolbar-title>
      </v-app-bar>

      <v-content>
        <v-card>
          <v-card-text>
            <p>{{ hello }}</p>

            <v-badge>
              <template v-slot:badge>{{ counter }}</template>
              <v-icon>alarm_add</v-icon>
            </v-badge>
          </v-card-text>
        </v-card>

        <v-container fluid>
          <router-view></router-view>
        </v-container>
      </v-content>
    </v-app>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://unpkg.com/vuex"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

  <script src="js/app.js" type="module"></script>
</body>

</html>

## router.js
import Home from './Home.js';
import About from './About.js';

const router = new VueRouter({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

export default router;

## store.js
const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    incCounter(state, delta) {
      state.counter += delta;
    },
    decCounter(state, delta) {
      state.counter -= delta;
    }
  },
  actions: {

  }
});

export default store;
	const About = Vue.component('about', {
	data() {
	return {
	hello: 'Hello About!'
	};
	},
	template: `<div>
	<v-card>
	<v-card-title>About</v-card-title>
	<v-card-text>
	<p>{{ hello }}</p>
	<counter></counter>
	</v-card-text>
	</v-card>
	</div>`
	});

	export default About;
	import router from './router.js';
	import store from './store.js';

	// common
	import Counter from './Counter.js';

	var app = new Vue({
	router,
	store,
	vuetify: new Vuetify(),
	data() {
	return {
	hello: 'Hello Vue!',
	drawer: false,
	};
	},
	computed: {
	...Vuex.mapState(['counter'])
	}
	}).$mount('#app');
	const Counter = Vue.component('counter', {
	computed: {
	...Vuex.mapState(['counter'])
	},
	methods: {
	incCounter() {
	this.$store.commit('incCounter', 1);
	},
	decCounter() {
	this.$store.commit('decCounter', 1);
	}
	},
	template: `<div>
	<v-card outlined>
	<v-card-title>Counter</v-card-title>
	<v-card-text>
	<p>{{ counter }}</p>
	</v-card-text>
	<v-card-actions>
	<v-btn text icon color="cyan" @click="incCounter">
	<v-icon>add_circle</v-icon>
	</v-btn>
	<v-btn text icon color="red" @click="decCounter">
	<v-icon>remove_circle</v-icon>
	</v-btn>
	</v-card-actions>
	</v-card>
	</div>`
	});

	export default Counter;
	const Home = Vue.component('home', {
	data() {
	return {
	hello: 'Hello Home!',
	};
	},
	template: `<div>
	<v-card>
	<v-card-title>Home</v-card-title>
	<v-card-text>
	<p>{{ hello }}</p>
	<counter></counter>
	</v-card-text>
	</v-card>
	</div>`
	});

	export default Home;
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	<title>HTML5 + Vue + Router + Vuex + Vuetify</title>

	<style>
	[v-cloak]>* {
	display: none
	}

	[v-cloak]::before {
	content: "loading…"
	}
	</style>
	</head>

	<body>
	<div id="app" v-cloak>
	<v-app>
	<v-navigation-drawer app v-model="drawer">
	<v-list-item>
	<v-list-item-content>
	<v-list-item-title class="title">
	Vue Simple App
	</v-list-item-title>
	<v-list-item-subtitle>
	Menu
	</v-list-item-subtitle>
	</v-list-item-content>
	</v-list-item>

	<v-divider></v-divider>

	<v-list dense nav>
	<v-list-item router to="/">
	<v-list-item-icon>
	<v-icon>home</v-icon>
	</v-list-item-icon>
	<v-list-item-content>
	<v-list-item-title>Home</v-list-item-title>
	</v-list-item-content>
	</v-list-item>
	<v-list-item router to="/about">
	<v-list-item-icon>
	<v-icon>info</v-icon>
	</v-list-item-icon>
	<v-list-item-content>
	<v-list-item-title>About</v-list-item-title>
	</v-list-item-content>
	</v-list-item>
	</v-list>
	</v-navigation-drawer>

	<v-app-bar app color="light-blue darken-1" dark>
	<v-app-bar-nav-icon @click.stop="drawer=!drawer"></v-app-bar-nav-icon>
	<v-toolbar-title>HTML5 + Vue + Router + Vuex + Vuetify</v-toolbar-title>
	</v-app-bar>

	<v-content>
	<v-card>
	<v-card-text>
	<p>{{ hello }}</p>

	<v-badge>
	<template v-slot:badge>{{ counter }}</template>
	<v-icon>alarm_add</v-icon>
	</v-badge>
	</v-card-text>
	</v-card>

	<v-container fluid>
	<router-view></router-view>
	</v-container>
	</v-content>
	</v-app>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	<script src="https://unpkg.com/vuex"></script>
	<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

	<script src="js/app.js" type="module"></script>
	</body>

	</html>
	import Home from './Home.js';
	import About from './About.js';

	const router = new VueRouter({
	// mode: 'history',
	routes: [
	{
	path: '/',
	name: 'home',
	component: Home
	},
	{
	path: '/about',
	name: 'about',
	component: About
	}
	]
	});

	export default router;
	const store = new Vuex.Store({
	state: {
	counter: 0
	},
	mutations: {
	incCounter(state, delta) {
	state.counter += delta;
	},
	decCounter(state, delta) {
	state.counter -= delta;
	}
	},
	actions: {

	}
	});

	export default store;