adding latest tutorials

tutorials/events-app/src/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view />
+  </div>
+</template>
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>

tutorials/events-app/src/components/HelloWorld.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

tutorials/events-app/src/components/partials/Nav.vue

@@ -0,0 +1,19 @@
+<template>
+    <nav class="navbar-brand">
+        <a class="navbar-item" href="/">
+            <strong class="is-size4">
+                Animal Rescue League
+            </strong>
+        </a>
+        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+        </a>
+        <div id="navbar" class="navbar-menu">
+            <div class="navbar-start">
+                
+            </div>
+        </div>
+    </nav>
+</template>

tutorials/events-app/src/main.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import './../node_modules/bulma/css/bulma.css'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

tutorials/events-app/src/router/index.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

tutorials/events-app/src/views/About.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="about">
+    <div class="hero is-primary">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title is-size-1">
+                    About Animal Rescue League
+                </h1>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.org-description {
+  margin-top: 50px;
+}
+</style>

tutorials/events-app/src/views/Home.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="home">
+    <section class="hero">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">
+            Welcome to the Animal Rescue League
+          </h1>
+          <h2 class="subtitle">
+            Make sure you check out the upcoming events below:
+          </h2>
+          <div class="button-block">
+            <button class="button is-xl is-dark">Sign up to browse events</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  components: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.hero {
+  text-align: center;
+  background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 400px;
+}
+
+.hero-body .title {
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
+  padding: 40px 0 20px 0;
+  font-size: 60px;
+}
+
+.subtitle {
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
+  font-size: 30px;
+}
+
+.button-block {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  position: absolute;
+  bottom: -150px;
+
+  .button {
+    margin-right: 50px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+
+  .welcome {
+    width: 400px;
+    padding: 10px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.is-xl {
+  font-size: 1.7rem;
+}
+</style>