Add component's lazy loading

README.md

@@ -14,33 +14,34 @@ You've been given the task of creating a simple application with create/read/del
 - [x] Create a branch off of master, commit all your work to this new branch.
 - [ ] When you are finished, open a PR to master (but do not merge it). In the PR description, copy, paste and answer the following:
 
-```
+---
-    ### Your name
+### Your name
+Noé Viricel
 
-      Noé Viricel
+### What was challenging?
+Cypress.io
 
-    ### What was challenging?
+### What did you enjoy doing?
+...
 
-      Cypress.io
+### If you had more time, what would you improve/do differently?
-
+  #### Components Lazy-Loading
-    ### What did you enjoy doing?
+  *(Prefetching auto-handled since Vue CLI 3+)*
+  - [x] Dynamic imports (works for most browsers).
+  - [ ] Improve browser support by using Async components, it would offer more control over Component's loading / error states.
       
 
-
+  - [] Use AntD (or any CSS Framework)
-    ### If you had more time, what would you improve/do differently?
+  - [] CSS Module
-
+  - [] Form Validations
-      - Use AntD (or any CSS Framework)
+  - [] Page Transitions
-      - CSS Module
+  - [] Loading State
-      - Form Validations
+  - [] Setup environment variables
-      - Page Transitions
+  - [] Setup API proxy with Axios
-      - Loading State
+  - [] More Accessibility
-      - Setup environment variables
+  - [] Image Caching & Lazy Loading
-      - Setup API proxy with Axios
+  - [] Inject axios globally as $http
-      - More Accessibility
+  - [] More test
-      - Component Lazy Loading
-      - Image Caching & Lazy Loading
-      - Inject axios globally as $http
-      - More test
 
     ### How much time (more or less) it took you to complete the task?
     
@@ -49,7 +50,7 @@ You've been given the task of creating a simple application with create/read/del
     ### What do you think about the task itself? (Was it a good experience? If not why?)
 
     ### Summary in a gif
-```
+
 - [ ] Invite us to your repository: @chayaline, @emilyrosina, @adamwardecki, @dangzo, @thomas-lhuillier, @SavanovicN & @Sergeon
 
 ## The specification

src/App.vue

@@ -13,14 +13,13 @@
 import { mapState } from "vuex";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
-import AddFruit from "@/components/AddFruit";
 
 export default {
   name: "App",
   components: {
     Footer,
     Header,
-    AddFruit
+    AddFruit: () => import("@/components/AddFruit")
   },
   computed: {
     ...mapState(["modalIsOpen"])

src/components/Form/ImageUnsplash/ImageUnsplash.vue

@@ -30,12 +30,11 @@
 
 <script>
 import { mapState } from "vuex";
-import ImageSkeleton from "./ImageSkeleton";
 
 export default {
   name: "ImageUnsplash",
   components: {
-    ImageSkeleton
+    ImageSkeleton: () => import("./ImageSkeleton")
   },
   props: {
     containerClass: {

src/components/Grid/Grid.vue

@@ -15,13 +15,12 @@
 <script>
 import { mapState } from "vuex";
 import GridItemSkeleton from "./GridItemSkeleton";
-import GridItem from "./GridItem";
 
 export default {
   name: "Grid",
   components: {
     GridItemSkeleton,
-    GridItem
+    GridItem: () => import("./GridItem")
   },
   props: {
     data: Array

src/components/Grid/GridItem.vue

@@ -21,11 +21,10 @@
 
 <script>
 import { mapState } from "vuex";
-import DeleteItem from "./DeleteItem";
 
 export default {
   name: "GridItem",
-  components: { DeleteItem },
+  components: { DeleteItem: () => import("./DeleteItem") },
   props: {
     item: Object
   },

src/views/Fruit.vue

@@ -26,11 +26,10 @@
 
 <script>
 import { mapState } from "vuex";
-import DeleteItem from "@/components/Grid/DeleteItem";
 
 export default {
   name: "FruitDetails",
-  components: { DeleteItem },
+  components: { DeleteItem: () => import("@/components/Grid/DeleteItem") },
   data() {
     return {
       modalOpen: true

src/views/Fruits.vue

@@ -11,11 +11,10 @@
 
 <script>
 import { mapState } from "vuex";
-import Grid from "@/components/Grid/Grid";
 
 export default {
   name: "Fruits",
-  components: { Grid },
+  components: { Grid: () => import("@/components/Grid/Grid") },
   computed: {
     ...mapState(["fruits"])
   },