Chore/async components

src/README.md

@@ -0,0 +1,79 @@
+# vue-template - Making async/lazy load of components
+
+Hi, everyone! 👋
+
+This is a nice repo with some approaches to use in VueJS (2.x) projects. [You may find more here](https://github.com/open-ish/vue2-template) or change by the branch at GitHub.
+
+If you wanna, let's get in touch!
+
+## What're we gonna use?
+
+- [VueJS (2.x | 3.x)](https://vuejs.org/)
+
+## Summary
+
+- [What does it resolve?](#What does it resolve?)
+- [Key files](#Key-files)
+
+## What does it solve?
+
+Once the application gets huge, keep it with good performance is one of the most challenging. A good approach that helps us is to create small chunks and get them smartly. Getting components async/lazy and choose the right moment to do it can help us a lot. vue-cli (using behind the scenes Vue and webpack) give us a nice approach to delay some chunks and reuse them when they are called in more than one place.
+
+The best part about it is easiness. You only will need to `change the way you are importing components` and combine it with a `v-if directive`. Let's take a look.
+
+### Import differences
+
+First of all, let's see the difference between the normal import and async/lazy import.
+
+**Normal import**
+
+```sh
+<template>
+    <div>
+        <!-- Once rendering the dad component, myNomalComponent also will be rendered -->
+        <myNomalComponent/>
+    </div>
+</template>
+
+import Vue from "vue";
+import myNomalComponent from './myNomalComponent.vue'
+
+export default Vue.extend({
+    components: {
+        myNomalComponent
+    }
+})
+```
+
+**Async/Lazy import**
+
+```sh
+<template>
+    <div>
+        <!-- This combination between the v-if directive and the import in a function-->
+        <!-- makes the component been rendered into a separated chunk.-->
+        <myAsyncComponent v-if="isOpened"/>
+
+        <button @click="isOpened=true"> btn </button>
+    </div>
+</template>
+
+import Vue from "vue";
+
+export default Vue.extend({
+    components: {
+        myAsyncComponent: () => import('./myAsyncComponent.vue')
+
+        // on vue 3
+        // you must import defineAsyncComponent from vue ;)
+        myAsyncComponentWithVue3: defineAsyncComponent(() => import('myAsyncComponentWithVue3.vue'))
+    },
+    data() {
+        return {
+            isOpened: false
+        }
+    }
+})
+```
+
+## Key files

src/components/Alert.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-alert dense type="info">
+    <slot />
+  </v-alert>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "Alert",
+});
+</script>

src/components/AsyncLazyImport.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <v-card class="mx-auto" max-width="344" outlined>
+      <v-card-text>
+        <Alert v-if="isFirstAsyncAlertOpened" dense type="info">
+          Rendering my first component </Alert
+        ><v-card-actions>
+          <v-btn outlined rounded text @click="openFirstAsyncAlert()">
+            First Button
+          </v-btn>
+        </v-card-actions>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Loading from "./loading.vue";
+import Erro from "./error.vue";
+
+const Alert = () => ({
+  component: import(/* webpackChunkName: "async-lazy-import" */ "./Alert.vue"),
+  loading: Loading,
+  error: Erro,
+  timeout: 5000,
+});
+
+export default Vue.extend({
+  name: "AsyncLazyImport",
+  components: {
+    Alert,
+  },
+  data() {
+    return {
+      isFirstAsyncAlertOpened: false,
+    };
+  },
+  methods: {
+    openFirstAsyncAlert() {
+      this.isFirstAsyncAlertOpened = !this.isFirstAsyncAlertOpened;
+    },
+  },
+});
+</script>

src/components/error.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h3>Error</h3>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "Error",
+});
+</script>

src/components/loading.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h3>loading</h3>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "Loading",
+});
+</script>

src/router/index.ts

@@ -11,13 +11,12 @@ const routes: Array<RouteConfig> = [
     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.
+    path: "/async-import",
+    name: "AsyncImport",
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+      import(
+        /* webpackChunkName: "async-import" */ "../views/AsyncLazyImportView.vue"
+      ),
   },
 ];
 

src/views/AsyncLazyImportView.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="about">
+    <h1>Async/Lazy import</h1>
+    <AsyncLazyImport />
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import AsyncLazyImport from "../components/AsyncLazyImport.vue";
+
+export default Vue.extend({
+  name: "AsyncLazyImportView",
+
+  components: {
+    AsyncLazyImport,
+  },
+});
+</script>