akobashikawa/html5-vue-router-vuex-vuetify.html

## html5-vue-router-vuex-vuetify.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>
    var 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>`
    });

    var 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>`
    });

    var 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>`
    });

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

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

    }
  });

  var app = new Vue({
    router,
    store,
    vuetify: new Vuetify(),
    data() {
      return {
        hello: 'Hello Vue!',
        drawer: false,
      };
    },
    computed: {
      ...Vuex.mapState(['counter'])
    }
  }).$mount('#app');
  </script>
</body>
</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>
	var 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>`
	});

	var 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>`
	});

	var 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>`
	});

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

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

	}
	});

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