DEV Community: Sith Norvang

How Build Tesla's Home Page Clone with Vue.js [ Series - Portfolio Apps ]

Sith Norvang — Wed, 29 Sep 2021 15:19:24 +0000

Hi Guys, it's time launching fourth episode of "Portfolio Apps" series.

Here, we are going to clone Tesla's Home Page. I decide writing this tutorial because I didn't find a way to combine AOS library and CSS Scroll Snapping. After figure it out. I wanted to share it.

1.0 / Setup

1.1 | Preset and Configuration
1.2 | Vuex
1.3 | Config "App.vue" & "main.js" files

2.0 / Components & Router

2.1 | Components
2.2 | View & Router

[ 1.1 ] Use Preset Configuration

Let's create a new project call "clone-hp-tesla" and use the previous preset "config-portfolio"

# Run this command

vue create clone-hp-tesla

About the feature of Scroll Snapping, we are going to install one plugin provide by Angelomelonas. Thanks to him 👍

# Run this command
# https://github.com/angelomelonas/vue-scroll-snap

npm install vue-scroll-snap --save

We need some background image like Tesla official home page. To pick all images, I used a chrome extension name "Image Picker"

https://chrome.google.com/webstore/detail/image-picker/bhibldekjicdbnjeeecmgoogcihoalhe

After downloading all images, store it in "assets" folder as following :

assets
|--> 1-hero-section-model3r.jpeg
|--> 2-section-solar-powerwall.jpeg
|--> 3-section-model-yr.jpeg
|--> 4-section-model-sr.jpeg
|--> 5-section-model-xr.jpeg

Get ready to configure Vuex ?

[ 1.2 ] Vuex

This tutorial is about to build animated home page. It means, we don't need creating to complex architecture for the store.

In folder "store" and "index.js" file, let's create two states / getters :

sectionMode
homeSections

One action and mutation :

changeSection

# store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    sectionMode: "Model 3R",
    homeSections: [
      { 
        id: 1,
        idSection: "section-one-hero",
        title: "Model 3R",
        paragraph: "Electric vehicule incentives are now available on eligible Model 3 in ACT, NSW, TAS and VIC.", 
        bgImage: require("@/assets/1-hero-section-model-3r.jpeg"),
        buttons: [
          { 
            value: "EXISTING INVENTORY", 
            bgColor: "rgba(30, 30, 30, 0.800)", 
            color: "rgba(249, 249, 249, 1.000)"
          },
          { 
            value: "CUSTOM ORDER", 
            bgColor: "rgba(249, 249, 249, 0.800)"
          }
        ]
      },
      { 
        id: 2, 
        idSection: "section-three-model-yr",
        title: "Model YR", 
        bgImage: require("@/assets/3-section-model-yr.jpeg"),
        buttons: [
          { 
            value: "LEARN MORE", 
            bgColor: "rgba(30, 30, 30, 0.800)", 
            color: "rgba(249, 249, 249, 1.000)"
          },
          { 
            value: "STAY UPDATED",
            bgColor: "rgba(249, 249, 249, 0.800)"
          }
        ]
      },
      { 
        id: 3, 
        idSection: "section-four-model-sr",
        title: "Model SR",
        paragraph: "Schedule a Touchless Test Drive", 
        bgImage: require("@/assets/4-section-model-sr.jpeg"),
        buttons: [
          {
            value: "CUSTOM ORDER",
            bgColor: "rgba(30, 30, 30, 0.800)",
            color: "rgba(249, 249, 249, 1.000)"
          },
          {
            value: "EXISTING INVENTORY",
            bgColor: "rgba(249, 249, 249, 0.800)"
          }
        ]
      },
      { 
        id: 4, 
        idSection: "section-five-model-xr",
        title: "Model XR",
        paragraph: "Schecule a Touchless Test Drive",
        bgImage: require("@/assets/5-section-model-xr.jpeg"),
        buttons: [
          {
            value: "CUSTOM ORDER",
            bgColor: "rgba(30, 30, 30, 0.800)",
            color: "rgba(249, 249, 249, 1.000)"
          },
          {
            value: "EXISTING INVENTORY",
            bgColor: "rgba(249, 249, 249, 0.800)"
          }
        ]
      },
      { 
        id: 5, 
        idSection: "section-two-solar-powerwall",
        title: "Solar and Powerwall",
        paragraph: "Power Everything", 
        bgImage: require("@/assets/2-section-solar-powerwall.jpeg"),
        buttons: [
          {
            value: "LEARN MORE",
            bgColor: "rgba(30, 30, 30, 0.800)",
            color: "rgba(249, 249, 249, 1.000)"
          }
        ]
      },
    ]
  },
  mutations: {
    changeSection(state, payload) {
      state.sectionMode = payload;
    },
  },
  actions: {
    changeSection(context,payload) {
      context.commit("changeSection", payload)
    }
  },
  getters: {
    sectionMode(state) {
      return state.sectionMode
    },
    homeSections(state) {
      return state.homeSections
    }
  },
  modules: {
  }
})

[ 1.3 ] Config "App.vue"

In vuex, we created a state which return all data we need :

NavBar,
Sections,

# ~/src/App.vue

<template>
  <LogoTesla />
  <div id="nav">
    <a
      v-for="section in homeSections"
      :key="section.id"
      :href="'#' + section.idSection"
      @click="changeSection(section.title)"
    >
      {{ section.title }}
    </a>
  </div>
  <Footer />
  <router-view/>
</template>

<script>
import LogoTesla from "@/components/LogoTesla"
import Footer from "@/components/Footer"

export default {
  components: {
    LogoTesla,
    Footer
  },
  computed: {
    homeSections() {
      return this.$store.getters["homeSections"]
    }
  },
  methods: {
    changeSection(section) {
      setTimeout(() => {
        this.$store.dispatch("changeSection", section);
      },1000);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  position: fixed;
  z-index: 500;
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

body {
  margin: 0;
}

a {
  text-decoration: none;
}
</style>

Now, we are ready to create all components 👍

[ 2.1 ] Components

Let's create three components :

components
|--> Footer.vue
|--> LogoTesla.vue
|--> Section.vue

# ~/components/Footer.vue

<template>
  <div class="footer">Tesla's Home Page Clone | Create with ❤️ by Sith Norvang</div>
</template>

<style>
.footer {
  position: fixed;
  display: flex;
  justify-content: center;
  z-index: 500;
  padding: 10px;
  font-size: 14px;
  bottom: 0;
  width: 100%;
  height: 30px;
  display: flex;
  color: white;
  background: rgb(30,30,30);
  background: linear-gradient(0deg, rgba(30,30,30,1) 0%, rgba(30,30,30,0) 100%);
}
</style>

# ~/components/LogoTesla.vue

<template>
  <svg
    style="position: absolute; left: 20; top: -10px;" 
    xmlns="http://www.w3.org/2000/svg"
    height="100"
    width="150"
    viewBox="-41.8008 -9.08425 362.2736 54.5055"
  >
    <path 
      d="M238.077 14.382v21.912h7.027V21.705h25.575v14.589h7.022V14.42l-39.624-.038m6.244-7.088h27.02c3.753-.746 6.544-4.058 7.331-7.262h-41.681c.779 3.205 3.611 6.516 7.33 7.262m-27.526 29.014c3.543-1.502 5.449-4.1 6.179-7.14h-31.517l.02-29.118-7.065.02v36.238h32.383M131.874 7.196h24.954c3.762-1.093 6.921-3.959 7.691-7.136h-39.64v21.415h32.444v7.515l-25.449.02c-3.988 1.112-7.37 3.79-9.057 7.327l2.062-.038h39.415V14.355h-32.42V7.196m-61.603.069h27.011c3.758-.749 6.551-4.058 7.334-7.265H62.937c.778 3.207 3.612 6.516 7.334 7.265m0 14.322h27.011c3.758-.741 6.551-4.053 7.334-7.262H62.937c.778 3.21 3.612 6.521 7.334 7.262m0 14.717h27.011c3.758-.747 6.551-4.058 7.334-7.263H62.937c.778 3.206 3.612 6.516 7.334 7.263M0 .088c.812 3.167 3.554 6.404 7.316 7.215h11.37l.58.229v28.691h7.1V7.532l.645-.229h11.38c3.804-.98 6.487-4.048 7.285-7.215v-.07H0v.07"
    />
</svg>
</template>

<script>
export default {
  name: "LogoTesla"
}
</script>

# ~/components/Section.vue

<template>
  <div
    :id="idSection"
    class="section-container"
    :style="{ backgroundImage:`url(${bgImage})` }"
    @mouseover="changeSection"
  >
    <transition name="fade" mode="out-in">
      <div class="data-container" v-if="sectionMode === title">
        <div class="text-container">
          <label>{{ title }}</label>
          <p>{{ paragraph }}</p>
        </div>
        <div class="button-container">
          <button 
            v-for="(button, index) in buttons" 
            :key="index"
            :style="{ backgroundColor: button.bgColor, color: button.color }"
            @click="toDevTo"
          >
            {{ button.value }}
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Section',
  props: [ "idSection", "title", "paragraph", "bgImage", "buttons"],
  computed: {
    sectionMode() {
      return this.$store.getters["sectionMode"]
    }
  },
  methods: {
    changeSection() {
      this.$store.dispatch("changeSection", this.title)
    },
    toDevTo() {
    window.location.href = "https://dev.to/sithcode/step-by-step-guide-to-build-vue-js-apps-for-your-portfolio-meditation-app-24n6"
    }
  },
}
</script>

<style>
.section-container {
  display: flex;
  justify-content: center;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  padding: 100px 0px 0px 0px;
}

.data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  height: 90%;
}

.text-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.button-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

label {
  font-weight: bold;
  font-size: 40px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}


.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

button {
  display: flex;
  padding: 12.5px 70px 12.5px 70px;
  border-radius: 20px;
  border: none;
  font-weight: 550;
  cursor: pointer;
}
</style>

[ 2.2 ] View & Router

This is the last step. We need to create the view of our home page and configure our router.

# ~/views/ViewHome.vue

<template>
  <VueScrollSnap>
    <Section 
      v-for="section in homeSections"
      :key="section.id"
      :idSection="section.idSection"
      :title="section.title"
      :paragraph="section.paragraph"
      :bgImage="section.bgImage"
      :buttons="section.buttons"
      class="item"
    />
  </VueScrollSnap>
</template>

<script>
  import VueScrollSnap from "vue-scroll-snap";
  import Section from "@/components/Section"

  export default {
    name: "ViewHome",
    components: {
      VueScrollSnap,
      Section
    },
    computed: {
      homeSections() {
        return this.$store.getters["homeSections"]
      },
    },
  };
</script>

<style>
.item {
  height: calc(100vh - 100px);
}

.scroll-snap-container {
  height: 100vh;
  width: 100vw;
}
</style>

# ~/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import ViewHome from '../views/ViewHome.vue'

const routes = [
  {
    path: '/',
    name: 'ViewHome',
    component: ViewHome
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Done ! You can find the result on link below :

https://tesla-clone-home-page.netlify.app/

See you on next episode 😉

How to build a Trello Clone App with Vue.js [ Series - Portfolio Apps ]

Sith Norvang — Tue, 31 Aug 2021 04:20:40 +0000

This third episode of "Portfolio Apps" series is dedicated to build a Trello Clone. Classic right ? I propose one softer tutorial than you can find on Vue Mastery. I hope you will enjoy it !

1.0 / Setup

1.1 | Install Vue
1.2 | Creating a new project
1.3 | Vuex
1.4 | App.vue & Main.js config

2.0 / Components & Router

2.1 | Components
2.2 | View & Router

[ 1.1 ] Install Vue 3

# Install latest stable of Vue

yarn global add @vue/cli

[ 1.2 ] Creating a new project

This time, let's manually select features for this new Vue application.

# run this command

vue create trello-clone

Do you remember previous tutorial about "Shopping Cart App" ? We saved a preset configuration. Let's use it !

I named it "config-portfolio".

[ 1.3 ] Vuex Configuration

As each tutorial, we are going to use Vuex. Let's dive in.

# ../store/index.js

import { createStore } from "vuex";

import rootMutations from "./mutations.js";
import rootActions from "./actions.js";
import rootGetters from "./getters.js";

const store = createStore({
  state() {
    return {
      overlay: false,
      lastListId: 3,
      lastCardId: 5,
      currentData: null,
      lists: [
        {
          id: 1,
          name: "list #1",
        },
        {
          id: 2,
          name: "list #2",
        },
        {
          id: 3,
          name: "list #3",
        },
      ],
      cards: [
        {
          listId: 1,
          id: 1,
          name: "card 1",
        },
        {
          listId: 2,
          id: 2,
          name: "card 2",
        },
        {
          listId: 3,
          id: 3,
          name: "card 3",
        },
      ],
    };
  },
  mutations: rootMutations,
  actions: rootActions,
  getters: rootGetters,
});

export default store;

We need creating 6 actions & mutations.

# ../store/actions.js

export default {
  createList(context, payload) {
    context.commit("createNewList", payload);
  },
  createCard(context, payload) {
    context.commit("createNewCard", payload);
  },
  toggleOverlay(context) {
    context.commit("toggleOverlay");
  },
  openForm(context, payload) {
    context.commit("openForm", payload);
  },
  saveCard(context, payload) {
    context.commit("saveCard", payload);
  },
  deleteCard(context, payload) {
    context.commit("deleteCard", payload);
  },
};

# ../store/mutations.js

export default {
  createNewList(state, payload) {
    state.lastListId++;
    const list = {
      id: state.lastListId,
      name: payload,
    };
    state.lists.push(list);
  },
  createNewCard(state, payload) {
    state.lastCardId++;
    const card = {
      listId: payload.listId,
      id: this.lastCardId,
      name: payload.name,
    };
    state.cards.push(card);
  },
  toggleOverlay(state) {
    state.overlay = !state.overlay;
  },
  openForm(state, payload) {
    state.currentData = payload;
  },
  saveCard(state, payload) {
    state.cards = state.cards.map((card) => {
      if (card.id === payload.id) {
        return Object.assign({}, card, payload);
      }
      return card;
    });
  },
  deleteCard(state, payload) {
    const indexToDelete = state.cards
      .map((card) => card.id)
      .indexOf(payload.id);
    state.cards.splice(indexToDelete, 1);
  },
};

To complete our store configuration, let's initialize 6 getters.

export default {
  lastListId(state) {
    return state.lastListId;
  },
  lastCardId(state) {
    return state.lastCardId;
  },
  lists(state) {
    return state.lists;
  },
  cards(state) {
    return state.cards;
  },
  overlay(state) {
    return state.overlay;
  },
  currentData(state) {
    return state.currentData;
  },
};

Great ! Our Vuex configuration is over now 👍

[ 1.4 ] App.vue & Main.js

Before create our components, we need to change some detail in App.vue and main.js files :

# ../App.vue

<template>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

body {
  margin: 0;
  overflow: hidden;
}

input {
  border: none;
  font-size: 15px;
  outline: none;
}
</style>

# ../main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index.js";

const app = createApp(App);

app.use(router);
app.use(store);
app.mount("#app");

Well configuration files is over ! Next step ? Creating all components.

[ 2.1 ] Components

This Trello Clone needs four components :

components
|-- Card.vue
|-- CardList.vue
|-- Overlay.vue
|-- Popup.vue

# ../components/Card.vue

<template>
  <input
    class="input-card"
    type="text"
    placeholder="Create a Card"
    v-model="cardName"
    @keyup.enter="createCard"
  />
</template>

<script>
export default {
  props: ["listId"],
  methods: {
    createCard() {
      if (this.cardName !== "") {
        const card = {
          listId: this.listId,
          name: this.cardName,
        };
        this.$store.dispatch("createCard", card);
        this.cardName = "";
      }
    },
  },
};
</script>

<style>
.input-card {
  position: relative;
  background-color: white;
  min-height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 10px;
  word-break: break-all;
  font-size: 16px;
}
</style>

About CardsList.vue component, we need installing a new dependency which allow us using "drag and drop" easily.

https://github.com/anish2690/vue-draggable-next

npm install vue-draggable-next

# or

yarn add vue-draggable-next

# ../components/CardsList.vue

<template>
  <draggable :options="{ group: 'cards' }" group="cards" ghostClass="ghost">
    <span
      class="element-card"
      v-for="(card, index) in cards"
      :key="index"
      @click="togglePopup(card)"
    >
      {{ card.name }}
    </span>
  </draggable>
</template>

<script>
import { VueDraggableNext } from "vue-draggable-next";

export default {
  props: ["listId", "listName"],
  components: {
    draggable: VueDraggableNext,
  },
  methods: {
    togglePopup(data) {
      const currentData = {
        listId: this.listId,
        listName: this.listName,
        id: data.id,
        name: data.name,
      };
      this.$store.dispatch("toggleOverlay");
      this.$store.dispatch("openForm", currentData);
    },
  },
  computed: {
    cards() {
      const cardFilteredByListId = this.$store.getters["cards"];
      return cardFilteredByListId.filter((card) => {
        if (card.listId === this.listId) {
          return true;
        } else {
          return false;
        }
      });
    },
    overlayIsActive() {
      return this.$store.getters["overlay"];
    },
  },
};
</script>

<style>
.element-card {
  position: relative;
  background-color: white;
  height: auto;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  min-height: 30px;
  margin-bottom: 10px;
  word-break: break-all;
  text-align: left;
}
</style>

# ../components/Overlay.vue

<template>
  <transition>
    <div v-if="overlayIsActive" class="overlay" @click="closeOverlay"></div>
  </transition>
</template>

<script>
export default {
  methods: {
    closeOverlay() {
      this.$store.dispatch("toggleOverlay");
    },
  },
  computed: {
    overlayIsActive() {
      return this.$store.getters["overlay"];
    },
  },
};
</script>

<style>
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 500;
}

.v-enter-from {
  opacity: 0;
}

.v-enter-active {
  transition: all 0.3s ease-out;
}

.v-enter-to {
  opacity: 1;
}

.v-leave-from {
  opacity: 1;
}

.v-leave-active {
  transition: all 0.3s ease-in;
}

.v-leave-to {
  opacity: 0;
}
</style>

# ../components/Popup.vue

<template>
  <transition>
    <div v-if="overlay" class="modal">
      <h1>List Name : {{ currentData.listName }}</h1>
      <input :placeholder="currentData.name" v-model="cardName" />
      <div class="container-button">
        <button class="blue" @click="saveElement">save</button>
        <button class="red" @click="deleteElement">delete</button>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      cardName: null,
    };
  },
  computed: {
    ...mapGetters(["overlay", "currentData"]),
  },
  methods: {
    saveElement() {
      if (this.cardName === null) {
        this.cardName = this.currentData.name;
      }
      const card = {
        listId: this.currentData.listId,
        id: this.currentData.id,
        name: this.cardName,
      };
      this.$store.dispatch("saveCard", card);
      this.cardName = null;
      this.$store.dispatch("toggleOverlay");
    },
    deleteElement() {
      this.$store.dispatch("deleteCard", this.currentData);
      this.$store.dispatch("toggleOverlay");
    },
  },
};
</script>

<style scoped>
.v-enter-from {
  opacity: 0;
}

.v-enter-active {
  transition: all 0.3s ease-out;
}

.v-enter-to {
  opacity: 1;
}

.v-leave-from {
  opacity: 1;
}

.v-leave-active {
  transition: all 0.3s ease-in;
}

.v-leave-to {
  opacity: 0;
}

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  height: 500px;
  width: 500px;
  border-radius: 10px;
  background-color: rgba(235, 236, 240, 1);
  z-index: 550;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input {
  width: 250px;
  height: 50px;
  padding: 10px 20px 10px 20px;
  border: 1px solid rgba(60, 60, 60, 0.2);
  border-radius: 15px;
}

button {
  display: flex;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 15px;
  cursor: pointer;
  transition-duration: 0.4s;
}

button:hover {
  color: white;
}

.blue {
  background-color: rgba(1, 100, 255, 1);
}

.blue:hover {
  background-color: rgba(1, 100, 255, 0.8);
}

.red {
  background-color: rgba(250, 52, 75, 1);
}
.red:hover {
  background-color: rgba(250, 52, 75, 0.8);
}

.container-button {
  display: flex;
  flex-direction: row;
  gap: 30px;
}
</style>

```



Perfect ! Only one last step and we will be able to use this Trello Clone.

## [ 2.2 ] View & Router <a name="view-router"></a>

Let's import all components needs in "Board.vue" view.



```js
# ../views/Board.vue

<template>
  <main class="list-container">
    <Overlay />
    <Popup />
    <section class="list-wrapper">
      <draggable
        :options="{ group: 'lists' }"
        group="lists"
        ghostClass="ghost"
        class="list-draggable"
      >
        <div class="list-card" v-for="(list, index) in lists" :key="index">
          <label class="list-header">{{ list.name }}</label>
          <div class="list-content">
            <CardsList :listId="list.id" :listName="list.name" />
          </div>
          <div class="list-footer">
            <Card :listId="list.id" />
          </div>
        </div>
      </draggable>
      <input
        type="text"
        class="input-new-list"
        placeholder="Create a List"
        v-model="listName"
        @keyup.enter="createList"
      />
    </section>
  </main>
</template>

<script>
import { VueDraggableNext } from "vue-draggable-next";
import CardsList from "@/components/CardsList";
import Card from "@/components/Card.vue";
import Overlay from "@/components/Overlay";
import Popup from "@/components/Popup";

export default {
  components: {
    draggable: VueDraggableNext,
    CardsList,
    Card,
    Overlay,
    Popup,
  },
  data() {
    return {
      listName: "",
    };
  },
  methods: {
    createList() {
      if (this.listName !== "") {
        this.$store.dispatch("createList", this.listName);
        this.listName = "";
      }
    },
  },
  computed: {
    lists() {
      return this.$store.getters["lists"];
    },
  },
};
</script>

<style>
.list-container {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
  border: 1px;
  z-index: 10;
}

.list-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  min-width: 100vw;
  height: 100vh;
  padding: 20px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-image: url("../assets/background-image.jpg");
  gap: 20px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.ghost {
  opacity: 0.5;
}

.list-draggable {
  display: flex;
  gap: 20px;
}

.input-new-list {
  display: flex;
  height: 30px;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(235, 236, 240, 0.5);
  min-width: 260px;
}

.input-new-list::placeholder {
  color: white;
}

.list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  height: auto;
}

.list-header {
  position: relative;
  display: flex;
  justify-content: center;
  word-break: break-all;
  align-items: center;
  min-width: 280px;
  max-width: 280px;
  line-height: 50px;
  padding: 0px 10px 0px 10px;
  background-color: rgba(235, 236, 240, 1);
  border-radius: 10px 10px 0px 0px;
  color: rgba(24, 43, 77, 1);
  user-select: none;
}

.list-content {
  overflow-y: scroll;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  max-width: 280px;
  height: auto;
  background-color: rgba(235, 236, 240, 1);
  padding: 0px 10px 0px 10px;
  box-shadow: 1.5px 1.5px 1.5px 0.1px rgba(255, 255, 255, 0.1);
  color: rgba(24, 43, 77, 1);
}

.list-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  background-color: rgba(235, 236, 240, 1);
  border-radius: 0px 0px 10px 10px;
  color: white;
  border-top: 0.5px solid rgba(255, 255, 255, 0.25);
  padding: 0px 10px 10px 10px;
}
</style>

```



About the background, you just download a image on https://unsplash.com/ and import your file and rename it as following :

assets
|-- background-image.jpg






```js
# ../router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Board from "../views/Board.vue";

const routes = [
  {
    path: "/",
    name: "Board",
    component: Board,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

It's done ! Want to check result ? You can run "yarn serve / npm run serve" in your terminal or just click on link below.

https://trello-clone-sith.netlify.app/

See you in the next episode 😉

How to build a Shopping Cart App with Vue.js [ Series - Portfolio Apps ]

Sith Norvang — Mon, 16 Aug 2021 04:16:44 +0000

This is the second episode of "Portfolio Apps" series. Today, we are going to build a simple shopping cart. I choose simulating a little shop about smartphones and tablets.

Let's dive in this new tutorial.

1.0 / Setup

1.1 | Install Vue
1.2 | Creating a new project
1.3 | Images
1.4 | Vuex

2.0 / Components & Router

2.1 | Views & Components
2.2 | Router

[ 1.1 ] Install Vue 3



# Install latest stable of Vue

yarn global add @vue/cli

[ 1.2 ] Creating a new project

This time, let's manually select features for this new Vue application.



# run this command

vue create shopping-cart-app

Press your spacebar to select "Router" and "Vuex"

Choose this options :

version 3 of Vue.js "3.x (Preview)",
the "history mode for router",
"ESLint with error prevention only",
"Lint On Save",
"Package .json"
Preset "Yes"
Custom and record the name you wish for this template.

[ 1.3 ] Images

Create four folders "iPadPro", "iPhone12Pro", "iPhoneSE" and "S21".



assets
|-- iPadPro
|-- iPhone12Pro
|-- iPHoneSE
|-- S21

Search and import all pictures in each folder as following :

[ 1.4 ] Vuex

Let's prepare all Vuex files. In "index.js", we need to initialize four states :

cart,
total,
qty,
products,



# ../store/index.js

import { createStore } from "vuex";

import rootMutations from "./mutations.js";
import rootActions from "./actions.js";
import rootGetters from "./getters.js";

const store = createStore({
  state() {
    return {
      cart: [],
      total: 0,
      qty: 0,
      products: [
        {
          id: 1,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Graphite",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProGraphite.jpg"),
          price: 999,
        },
        {
          id: 2,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Silver",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProSilver.jpg"),
          price: 999,
        },
        {
          id: 3,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Gold",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProGold.jpg"),
          price: 999,
        },
        {
          id: 4,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Pacific Blue",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProPacificBlue.jpg"),
          price: 999,
        },
        {
          id: 5,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Graphite",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProGraphite.jpg"),
          price: 1199.0,
        },
        {
          id: 6,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Silver",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProSilver.jpg"),
          price: 1199,
        },
        {
          id: 7,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Gold",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProGold.jpg"),
          price: 1199,
        },
        {
          id: 8,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Pacific Blue",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProPacificBlue.jpg"),
          price: 1199,
        },
        {
          id: 9,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Graphite",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProGraphite.jpg"),
          price: 1399,
        },
        {
          id: 10,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Silver",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProSilver.jpg"),
          price: 1399,
        },
        {
          id: 11,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Gold",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProGold.jpg"),
          price: 1399,
        },
        {
          id: 12,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone 12 Pro",
          color: "Pacific Blue",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPhone12Pro/iPhone12ProPacificBlue.jpg"),
          price: 1399,
        },
        {
          id: 13,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "White",
          capacity: "64 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSEWhite.jpg"),
          price: 399,
        },
        {
          id: 14,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "White",
          capacity: "64 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSEWhite.jpg"),
          price: 399,
        },
        {
          id: 15,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "Red",
          capacity: "64 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSERed.jpg"),
          price: 399,
        },
        {
          id: 14,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "White",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSEWhite.jpg"),
          price: 499,
        },
        {
          id: 15,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "White",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSEWhite.jpg"),
          price: 499,
        },
        {
          id: 16,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "Red",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSERed.jpg"),
          price: 499,
        },
        {
          id: 17,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "White",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSEWhite.jpg"),
          price: 599,
        },
        {
          id: 18,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "White",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSEWhite.jpg"),
          price: 599,
        },
        {
          id: 19,
          type: "Smartphone",
          brand: "Apple",
          model: "iPhone SE",
          color: "Red",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPhoneSE/iPhoneSERed.jpg"),
          price: 599,
        },
        {
          id: 20,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Space Gray",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1299,
        },
        {
          id: 21,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Silver",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1299,
        },
        {
          id: 22,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Space Gray",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1499,
        },
        {
          id: 23,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Silver",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1499,
        },
        {
          id: 24,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Space Gray",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1599,
        },
        {
          id: 25,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Silver",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1599,
        },
        {
          id: 26,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Space Gray",
          capacity: "1 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1699,
        },
        {
          id: 27,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Silver",
          capacity: "1 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1699,
        },
        {
          id: 28,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Space Gray",
          capacity: "2 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1799,
        },
        {
          id: 29,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi",
          color: "Silver",
          capacity: "2 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1799,
        },
        {
          id: 30,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Space Gray",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1546,
        },
        {
          id: 31,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Silver",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1546,
        },
        {
          id: 32,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Space Gray",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1599,
        },
        {
          id: 33,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Silver",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1599,
        },
        {
          id: 34,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Space Gray",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1699,
        },
        {
          id: 35,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Silver",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1699,
        },
        {
          id: 36,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Space Gray",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1799,
        },
        {
          id: 37,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Silver",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1799,
        },
        {
          id: 38,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Space Gray",
          capacity: "1 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1899,
        },
        {
          id: 39,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Silver",
          capacity: "1 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1899,
        },
        {
          id: 40,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Space Gray",
          capacity: "2 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1999,
        },
        {
          id: 41,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi",
          color: "Silver",
          capacity: "2 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1999,
        },
        {
          id: 42,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1799,
        },
        {
          id: 43,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1799,
        },
        {
          id: 44,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1899,
        },
        {
          id: 45,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1899,
        },
        {
          id: 46,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1799,
        },
        {
          id: 47,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1799,
        },
        {
          id: 48,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1699,
        },
        {
          id: 49,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1699,
        },
        {
          id: 50,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "1 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1799,
        },
        {
          id: 51,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "1 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1799,
        },
        {
          id: 52,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "2 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1899,
        },
        {
          id: 53,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 11-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "2 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1899,
        },
        {
          id: 54,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 1999,
        },
        {
          id: 55,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "128 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 1999,
        },
        {
          id: 56,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 2099,
        },
        {
          id: 55,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "256 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 2099,
        },
        {
          id: 56,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 2199,
        },
        {
          id: 57,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "512 GB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 2199,
        },
        {
          id: 58,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "1 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 2299,
        },
        {
          id: 59,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "1 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 2299,
        },
        {
          id: 60,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Space Gray",
          capacity: "2 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSpaceGray.jpg"),
          price: 2399,
        },
        {
          id: 61,
          type: "Tablet",
          brand: "Apple",
          model: "iPad Pro 12.9-inch display Wifi + Cellular",
          color: "Silver",
          capacity: "2 TB",
          imgSrc: require("@/assets/iPadPro/iPadProSilver.jpg"),
          price: 2399,
        },
        {
          id: 62,
          type: "Smartphone",
          brand: "Samsung",
          model: "S21 5G",
          color: "Phantom Grey",
          capacity: "128 GB",
          imgSrc: require("@/assets/S21/S21PhantomGrey.jpg"),
          price: 799,
        },
        {
          id: 63,
          type: "Smartphone",
          brand: "Samsung",
          model: "S21 5G",
          color: "Phantom Pink",
          capacity: "128 GB",
          imgSrc: require("@/assets/S21/S21PhantomPink.jpg"),
          price: 799,
        },
        {
          id: 64,
          type: "Smartphone",
          brand: "Samsung",
          model: "S21 5G",
          color: "Phantom Violet",
          capacity: "128 GB",
          imgSrc: require("@/assets/S21/S21PhantomViolet.jpg"),
          price: 799,
        },
        {
          id: 65,
          type: "Smartphone",
          brand: "Samsung",
          model: "S21 5G",
          color: "Phantom White",
          capacity: "128 GB",
          imgSrc: require("@/assets/S21/S21PhantomWhite.jpg"),
          price: 799,
        },
      ],
    };
  },
  mutations: rootMutations,
  actions: rootActions,
  getters: rootGetters,
});

export default store;

Now, we are going to create three files "actions.js", "mutations.js", "getters.js"



store
|-- actions.js
|-- getters.js
|-- index.js
|-- mutations.js

This application required two actions :

"addToCart"
"removeFromCart"

And two mutations :

"addProductToCart"
"removeProductFromCart"



# ./store/actions.js

export default {
  addToCart(context, payload) {
    const prodId = payload.id;
    const products = context.rootGetters.products;
    const product = products.find((prod) => prod.id === prodId);
    context.commit("addProductToCart", product);
  },
  removeFromCart(context, payload) {
    context.commit("removeProductFromCart", payload);
  },
};

And two mutations :

"addProductToCart"
"removeProductFromCart"



# ./store/mutations.js

export default {
  addProductToCart(state, payload) {
    const productData = payload;
    const productInCartIndex = state.cart.findIndex(
      (ci) => ci.id === productData.id
    );
    if (productInCartIndex >= 0) {
      state.cart[productInCartIndex].qty++;
    } else {
      const newItem = {
        id: productData.id,
        type: productData.type,
        brand: productData.brand,
        model: productData.model,
        color: productData.color,
        capacity: productData.capacity,
        imgSrc: productData.imgSrc,
        price: productData.price,
        qty: 1,
      };
      state.cart.push(newItem);
    }
    state.qty++;
    state.total += productData.price;
  },

  removeProductFromCart(state, payload) {
    const prodId = payload.id;
    const productInCartIndex = state.cart.findIndex(
      (cartItem) => cartItem.id === prodId
    );
    const prodData = state.cart[productInCartIndex];
    state.cart.splice(productInCartIndex, 1);
    state.qty -= prodData.qty;
    state.total -= prodData.price * prodData.qty;
  },
};

And four getters which return each state :



# ./store/getters

export default {
  products(state) {
    return state.products;
  },
  totalSum(state) {
    return state.total;
  },
  quantity(state) {
    return state.qty;
  },
  cart(state) {
    return state.cart;
  }
};

[ 2.1 ] Views & Components

We are going to create four views :



views
|-- AllProduts.vue
|   # Display all products
|-- Smartphones.vue
|   # Filter only Smartphones Products
|-- Tablets.vue
|   # Filter only Tablets Products
|-- Cart.vue
    # Display all products added to Cart

About the first view "All Products", we need to create three components :



AllProducts.vue
|-- Wrapper.vue
|-- ProductCard.vue



# ../views/AllProducts.vue

<template>
  <Wrapper>
    <ProductCard
      v-for="product in products"
      :key="product.id"
      :id="product.id"
      :type="product.type"
      :brand="product.brand"
      :model="product.model"
      :color="product.color"
      :capacity="product.capacity"
      :imgSrc="product.imgSrc"
      :price="product.price"
    />
  </Wrapper>
</template>

<script>
import ProductCard from "@/components/ProductCard";

export default {
  components: {
    ProductCard,
  },
  computed: {
    products() {
      const productsSort = this.$store.getters["products"];
      return productsSort.sort((a, b) => {
        if (a.model < b.model) {
          return -1;
        }
        if (a.model > b.model) {
          return 1;
        }
        return 0;
      });
    },
  },
};
</script>



# ../components/Wrapper.vue

<template>
  <div class="wrapper">
    <div class="product-container">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "Wrapper",
}
</script>

<style>
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-container {
  padding-top: 170px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}
</style>




<template>
  <div class="product-card">
    <div class="image-container">
      <img class="img-style" :src="imgSrc" :alt="brand + model" />
    </div>
    <p class="price-label">₿ {{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
    <span class="product-title">
      {{ brand }} {{ model }} {{ color }} {{ capacity }}
    </span>
  </div>
</template>

<script>
export default {
  name: "ProductCard",
  props: [
    "id",
    "type",
    "brand",
    "model",
    "color",
    "capacity",
    "imgSrc",
    "price",
  ],
  methods: {
    addToCart() {
      this.$store.dispatch("addToCart", {
        id: this.id,
        type: this.type,
        brand: this.brand,
        model: this.model,
        color: this.color,
        capacity: this.capacity,
        imgSrc: this.imgSrc,
        price: this.price,
      });
    },
  },
};
</script>

<style scoped>
.product-card {
  display: flex;
  flex-direction: column;
  height: 450px;
  max-height: 450px;
  max-width: 250px;
  background-color: white;
  border-radius: 15px;
  flex: 1 1 240px;
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(60, 60, 60, 0.2);
  padding: 30px;
}

.img-style {
  display: flex;
  height: 250px;
  object-fit: cover;
}

.image-container {
  display: flex;
  justify-content: center;
}

.product-title {
  display: flex;
  color: rgba(66, 185, 131, 1);
  font-weight: bold;
  height: 100%;
  align-items: flex-start;
  justify-content: center;
}

.price-label {
  font-weight: bold;
  font-size: 20px;
}
</style>

Why should we create components in two different folders ? Because "ProductCard.vue" and "Wrapper.vue" are reusable components ! We are going to use it again 💪 in "Smartphones.vue" and "Tablets.vue" :



# ../views/Smartphones.vue

<template>
  <Wrapper>
    <ProductCard
      v-for="product in products"
      :key="product.id"
      :id="product.id"
      :type="product.type"
      :brand="product.brand"
      :model="product.model"
      :color="product.color"
      :capacity="product.capacity"
      :imgSrc="product.imgSrc"
      :price="product.price"
    />
  </Wrapper>
</template>

<script>
import ProductCard from "@/components/ProductCard";

export default {
  components: {
    ProductCard,
  },
  computed: {
    products() {
      const productsFilter = this.$store.getters["products"];
      return productsFilter.filter((product) => {
        if (product.type.includes("Smartphone")) {
          return true;
        } else {
          return false;
        }
      });
    },
  },
};
</script>



# ../views/Tablets.vue 

<template>
  <Wrapper>
    <ProductCard
      v-for="product in products"
      :key="product.id"
      :id="product.id"
      :type="product.type"
      :brand="product.brand"
      :model="product.model"
      :color="product.color"
      :capacity="product.capacity"
      :imgSrc="product.imgSrc"
      :price="product.price"
    />
  </Wrapper>
</template>

<script>
import ProductCard from "@/components/ProductCard";

export default {
  components: {
    ProductCard,
  },
  computed: {
    products() {
      const productsFilter = this.$store.getters["products"];
      return productsFilter.filter((product) => {
        if (product.type.includes("Tablet")) {
          return true;
        } else {
          return false;
        }
      });
    },
  },
};
</script>

This is how reusable components works ! Awesome right ? 👍



# ../views/Cart.vue

<template>
  <Wrapper>
    <div class="container-cart">
      <h2>Your Cart</h2>
      <h3>Total Amount: ₿ {{ cartTotal }}</h3>
      <ul>
        <CartCard
          v-for="product in cartProducts"
          :key="product.id"
          :id="product.id"
          :type="product.type"
          :brand="product.brand"
          :model="product.model"
          :color="product.color"
          :capacity="product.capacity"
          :imgSrc="product.imgSrc"
          :price="product.price"
          :qty="product.qty"
        ></CartCard>
      </ul>
    </div>
  </Wrapper>
</template>

<script>
import CartCard from "@/components/CartCard.vue";

export default {
  components: {
    CartCard,
  },
  computed: {
    cartTotal() {
      return this.$store.getters["totalSum"].toFixed(2);
    },
    cartProducts() {
      return this.$store.getters["cart"];
    },
  },
};
</script>

<style scoped>
.container-cart {
  display: flex;
  flex-direction: column;
}

h2 {
  color: #292929;
  text-align: center;
  border-bottom: 2px solid #ccc;
  padding-bottom: 1rem;
}

h3 {
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>



# ../components/CartCard.vue

<template>
  <li>
    <div class="image-container">
      <img :src="imgSrc" :alt="model" />
    </div>
    <div>
      <h3>{{ brand }} {{ model }} {{ color }} {{ capacity }}</h3>
      <div class="item-data">
        <div>
          Price per Item:
          <strong>₿ {{ price.toFixed(2) }}</strong>
        </div>
        <div>
          Quantity:
          <strong>{{ qty }}</strong>
        </div>
      </div>
      <div class="item-total">Total: ₿ {{ itemTotal }}</div>
      <button @click="remove">Remove</button>
    </div>
  </li>
</template>

<script>
export default {
  props: [
    "id",
    "type",
    "brand",
    "model",
    "color",
    "capacity",
    "imgSrc",
    "price",
    "qty",
  ],
  computed: {
    itemTotal() {
      return (this.price * this.qty).toFixed(2);
    },
  },
  methods: {
    remove() {
      this.$store.dispatch("removeFromCart", { id: this.id });
    },
  },
};
</script>

<style scoped>
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

li {
  margin: 1rem auto;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  max-width: 25rem;
  border-radius: 15px;
  border: 1px solid rgba(60, 60, 60, 0.2);
}

img {
  display: flex;
  height: 250px;
  object-fit: cover;
}

.item-data {
  display: flex;
  justify-content: space-between;
}

.item-total {
  font-weight: bold;
  margin: 1rem 0;
  border-top: 1px solid #474747;
  border-bottom: 2px solid #474747;
  padding: 0.25rem 0;
  width: auto;
}
</style>



# ../components/TheHeader.vue

<template>
  <div id="nav">
    <router-link to="/">All Products</router-link>
    <router-link to="/smartphones">Smartphones</router-link>
    <router-link to="/tablets">Tablets</router-link>
    <router-link to="/cart">Cart</router-link>
    <span class="counter-cart" v-if="socketCart > 0"> {{ socketCart }} </span>
  </div>
</template>

<script>

export default {
  computed: {
    socketCart() {
      return this.$store.getters["quantity"];
    },
  },
};
</script>

<style>
#nav {
  position: fixed;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 94%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 100%;
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
  text-decoration: none;
  line-height: 30px;
  padding: 0px 30px 0px 30px;
}

#nav a.router-link-exact-active {
  color: #42b983;
  text-decoration: none;
  padding: 0px 30px 0px 30px;
  line-height: 30px;
}

.counter-cart {
  display: inline-block;
  padding: 0.3rem 0.7rem 0.3rem 0.7rem;
  background-color: rgba(162, 205, 2, 1);
  color: white;
  border-radius: 50px;
}
</style>



# ../App.vue

<template>
  <TheHeader />
  <router-view />
</template>

<script>
import TheHeader from "./components/TheHeader.vue";

export default {
  components: {
    TheHeader,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

body {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
  background-color: rgba(66, 185, 131, 1);
  color: white;
  border: 1px solid rgba(66, 185, 131, 1);
  padding: 0.5rem 1.5rem;
  border-radius: 30px;
  margin-bottom: 20px;
}

button:hover,
button:active {
  background-color: #82dcb1;
  border-color: #82dcb1;
}
</style>

[ 2.2 ] Router

Every components are ready now. We can configuring the router.



# ../router/index.js

import { createRouter, createWebHistory } from "vue-router";
import AllProducts from "../views/AllProducts.vue";

const routes = [
  {
    path: "/",
    name: "AllProducts",
    component: AllProducts,
  },
  {
    path: "/smartphones",
    name: "Smartphones",
    component: () => import("../views/Smartphones.vue"),
  },
  {
    path: "/tablets",
    name: "Tablets",
    component: () => import("../views/Tablets.vue"),
  },
  {
    path: "/cart",
    name: "cart",
    component: () => import("../views/Cart.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;



# ../main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index.js";

import Wrapper from "@/components/Wrapper";

const app = createApp(App);

app.use(router);
app.use(store);

app.component("Wrapper", Wrapper);

app.mount("#app");

Done ! You can try this Shopping Cart Application here :

https://shopping-cart-demo-sith.netlify.app

See you soon in next episode of "Portfolio Apps" series.

How to build a Meditation App with Vue.js [ Series - Portfolio Apps ]

Sith Norvang — Thu, 12 Aug 2021 15:48:54 +0000

This is the first episode of "Apps For Your Portfolio" series. In this post, we are going to build a Meditation App with my favorite front-end framework Vue.js.

1.0 / Setup

1.1 | Install Vue
1.2 | Creating a new project
1.3 | Install Vuex & Sass Loader

2.0 / Assets

2.1 | Images
2.2 | Sounds
2.3 | Svg
2.4 | Videos

3.0 / Components

3.1 | ContainerBackground.vue
3.2 | ContainerPopUp.vue
3.3 | Sound.vue
3.4 | ContainerTimer.vue
3.5 | ContainerLinks.vue

[ 1.1 ] Vue 3 Config

# Install latest stable of Vue

yarn global add @vue/cli

[ 1.2 ] Creating a new project

# Create a New Vue Application name 'meditation-app'

vue create meditation-app
cd meditation-app
yarn

[ 1.3 ] Install Vuex & Sass Loader

We also need to install sass-loader pre-processors to animate easily our future timer. If you don't know Sass is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more.

You can find more information on the official documentation :

https://sass-lang.com/documentation

yarn add -D sass-loader sass

To help my code organized in this application. I decide to use the state management pattern Vuex.

yarn add vuex@next --save

To use Vuex, we need also to change main.js and create a new folder name "store" with four files :

index.js
actions.js
mutations.js
getters.js

# ../src/main.js

import { createApp } from 'vue';

import App from './App.vue';
import store from './store/index.js'

const app = createApp(App);

app.use(store);

app.mount('#app');

src
|
|-- store |-- actions.js
          |-- getters.js 
          |-- index.js
          |-- mutations.js

To build our meditation application, let's initialize all states, actions, mutations and getters as following :

'isPlaying'
'timeSelected'
'vibeSelected'
'step'
'choices'

# ../store/index.js

import { createStore } from 'vuex'

import rootMutations from './mutations.js'
import rootActions from './actions.js'
import rootGetters from './getters.js'

const store = createStore({
  state() {
    return {
      isPlaying: false,
      timeSelected: 0,
      vibeSelected: { value: 'bird'},
      step: 0,
      choices: [
        { 
          id: 1,
          name: '10 minutes',
          imgSrc: require("@/assets/images/Bouton_10_minutes.png"),
          category: 'timer',
          value: 600,
        },
        { 
          id: 2,
          name: '20 minutes',
          imgSrc: require("@/assets/images/Bouton_20_minutes.png"),
          category: 'timer',
          value: 1200,
        },
        { 
          id: 3,
          name: '30 minutes',
          imgSrc: require("@/assets/images/Bouton_30_minutes.png"),
          category: 'timer',
          value: 1800,
        },
        {
          id: 4,
          name: 'In The Space',
          imgSrc: require("@/assets/images/Bouton_Space.png"),
          category: 'vibe',
          value: 'space',
        },
        {
          id: 5,
          name: 'On The Beach',
          imgSrc: require("@/assets/images/Bouton_Beach.png"),
          category: 'vibe',
          value: 'beach',
        },
        {
          id: 6,
          name: 'Under The Rain',
          imgSrc: require("@/assets/images/Bouton_Rain.png"),
          category: 'vibe',
          value: 'rain',
        },
      ]
    }
  },
  mutations: rootMutations,
  actions: rootActions,
  getters: rootGetters,
});

export default store;

# ../src/store/actions.js

export default {
  changeTimer(context, time) {
    context.commit('changeTimer', time)
  },
  changeVibe(context, vibe) {
    context.commit('changeVibe', vibe)
  },
  changeStep(context) {
    context.commit('changeStep')
  },
  activeIsPlaying(context) {
    context.commit('activeIsPlaying')
  },
  togglePlayPause(context) {
    context.commit('togglePlayPause')
  },
}

# ../src/store/mutations.js

export default {
  changeTimer(state, time) {
    state.timeSelected = time
  },
  changeVibe(state, vibe) {
    state.vibeSelected = vibe 
  },
  changeStep(state) {
    state.step++
  },
  activeIsPlaying(state) {
    state.isPlaying = true
  },
  togglePlayPause(state) {
    state.isPlaying = !state.isPlaying
  },
}

# ../src/store/getters.js

export default {
  timeSelected(state) {
    return state.timeSelected
  },
  vibeSelected(state) {
    return state.vibeSelected
  },
  step(state) {
    return state.step
  },
  choices(state) {
    return state.choices
  },
  isPlaying(state) {
    return state.isPlaying
  }
}

Great ! The next step is importing all assets.

Let's create four new folders in assets :

images,
sounds,
svg,
videos,

src
|
|-- assets --|-- images
             |-- sounds
             |-- svg
             |-- videos

[ 2.1 ] Assets Images

Maybe you didn't notice but the state 'choices' is an array of objects. Each object has an attribute 'imgSrc' as this example.

{
  id: 6,
  name: 'Under The Rain',
  imgSrc: require("@/assets/images/Bouton_Rain.png"),
  category: 'vibe',
  value: 'rain',
},

As you can see it 'require("@/assets/images/Bouton_Rain.png")' is the path to import the file 'Bouton_Rain.png'

You need to create six illustrations relative to timer and to background video as following :

I took some image from https://unsplash.com/ and resizing it to 375px width | 250px height.

src
|
|-- assets --|-- images -- Bouton_10_minutes.png
                       |-- Bouton_20_minutes.png
                       |-- Bouton_30_minutes.png
                       |-- Bouton_Beach.png
                       |-- Bouton_Rain.png
                       |-- Bouton_Space.png

[ 2.2 ] Assets Sounds

Download four sound effects from https://www.videvo.net/ and import them in sounds folder.

src
|
|-- assets -- sounds -- beach.mp3
                    |-- calmSpace.mp3
                    |-- rain.mp3
                    |-- songOfBirds.mp3

[ 2.3 ] Assets Svg

Create eight components in svg folder :

src
|
|-- assets -- svg -- BeachSvg.vue
                 |-- GithubSvg.vue
                 |-- LinkedInSvg.vue
                 |-- PauseSvg.vue
                 |-- PlaySvg.vue
                 |-- PraySvg.vue
                 |-- RainSvg.vue
                 |-- SpaceSvg.vue

# ../src/assets/svg/BeachSvg.vue

<template>
  <svg :width="defaultWidth" :height="defaultHeight" viewBox="0 0 640 640" :fill="defaultColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M115.4 200.8L217.5 238.15C252.63 156.53 303.75 93.75 356.5 64.45C260.62 59.575 167.7 101.41 108 176.15C101.2 184.6 105.2 197.2 115.4 200.8ZM247.6 249L486.1 335.87C521.85 214.47 504.72 104.27 443.47 81.97C436.095 79.345 428.35 77.908 420.35 77.908C362.4 77.88 292.1 147.13 247.6 249ZM521.5 124.51C527.75 140.76 532.25 159.13 534.63 179.76C540.38 229.63 533.254 287.86 515.75 346.66L618.35 384.03C628.48 387.78 639.6 380.655 639.85 369.91C642.3 274.1 598 182.4 521.5 124.51ZM528 512H321L386 333.5L325.87 311.63L252.99 512.03H48C21.49 512 0 533.5 0 560C0 568.8 7.163 576 16 576H560C568.837 576 576 568.837 576 560.9C576 533.5 554.5 512 528 512Z" :fill="defaultColor"/>
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      required: false,
    },
    color: {
      type: String,
      required: false,
    }
  },
  computed: {
    defaultWidth() {
      return this.size
    },
    defaultHeight() {
      return this.size
    },
    defaultColor() {
      return this.color
    }
  }
}
</script>

# ../src/assets/svg/GithubSvg.vue

<template>
  <svg :width="defaultWidth" :height="defaultHeight" viewBox="0 0 640 640" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M320 140C220.4 140 140 220.4 140 320C140 399.2 191.6 466.4 263.6 490.4C273.2 491.6 275.6 486.8 275.6 482V450.8C225.2 461.6 214.4 426.8 214.4 426.8C206 406.4 194 400.4 194 400.4C177.2 389.6 195.2 389.6 195.2 389.6C213.2 390.8 222.8 407.6 222.8 407.6C238.4 435.2 264.8 426.8 275.6 422C276.8 410 281.6 402.8 287.6 398C248 393.2 206 377.6 206 309.2C206 290 213.2 273.2 224 261.2C221.6 256.4 215.6 238.4 225.2 213.2C225.2 213.2 240.8 208.4 274.4 231.2C288.8 227.6 304.4 225.2 320 225.2C335.6 225.2 351.2 227.6 365.6 231.2C400.4 208.4 414.8 213.2 414.8 213.2C424.4 238.4 418.4 256.4 416 261.2C428 273.2 434 290 434 309.2C434 378.8 392 393.2 352.4 398C358.4 404 364.4 414.8 364.4 431.6V480.8C364.4 485.6 368 491.6 376.4 489.2C448.4 465.2 498.8 398 498.8 318.8C500 220.4 419.6 140 320 140Z" :fill="defaultColor"/>
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      required: false,
    },
    color: {
      type: String,
      required: false,
    }
  },
  computed: {
    defaultWidth() {
      return this.size
    },
    defaultHeight() {
      return this.size
    },
    defaultColor() {
      return this.color
    }
  }
}
</script>

# ../src/assets/svg/LinkedInSvg.vue

<template>
  <svg :width="defaultWidth" :height="defaultHeight" viewBox="0 0 640 640" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M512 96H127.9C110.3 96 96 110.5 96 128.3V511.7C96 529.5 110.3 544 127.9 544H512C529.6 544 544 529.5 544 511.7V128.3C544 110.5 529.6 96 512 96ZM231.4 480H165V266.2H231.5V480H231.4ZM198.2 237C176.9 237 159.7 219.7 159.7 198.5C159.7 177.3 176.9 160 198.2 160C219.4 160 236.7 177.3 236.7 198.5C236.7 219.8 219.5 237 198.2 237V237ZM480.3 480H413.9V376C413.9 351.2 413.4 319.3 379.4 319.3C344.8 319.3 339.5 346.3 339.5 374.2V480H273.1V266.2H336.8V295.4H337.7C346.6 278.6 368.3 260.9 400.6 260.9C467.8 260.9 480.3 305.2 480.3 362.8V480V480Z" :fill="defaultColor"/>
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      required: false,
    },
    color: {
      type: String,
      required: false,
    }
  },
  computed: {
    defaultWidth() {
      return this.size
    },
    defaultHeight() {
      return this.size
    },
    defaultColor() {
      return this.color
    }
  }
}
</script>

# ../src/assets/svg/PauseSvg.vue

<template>
  <svg :width="defaultWidth" :height="defaultHeight" viewBox="0 0 640 640" :fill="defaultColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M432 127.1H400C373.49 127.1 352 148.59 352 174.2V462.2C352 488.71 373.49 510.2 400 510.2L432 512C458.51 512 480 490.51 480 464V176C480 149.49 458.5 127.1 432 127.1ZM240 127.1H208C181.49 127.1 160 148.59 160 175.1V463.1C160 490.5 181.49 512 208 512H240C266.51 512 288 490.51 288 464V176C288 149.49 266.5 127.1 240 127.1Z" :fill="defaultColor"/>
  </svg>

</template>

<script>
export default {
  props: {
    size: {
      type: String,
      required: false,
    },
    color: {
      type: String,
      required: false,
    }
  },
  computed: {
    defaultWidth() {
      return this.size
    },
    defaultHeight() {
      return this.size
    },
    defaultColor() {
      return this.color
    }
  }
}
</script>

# ../src/assets/svg/PlaySvg.vue

<template>
  <svg :width="defaultWidth" :height="defaultHeight" viewBox="0 0 640 640" :fill="defaultColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M176 543.98C148.6 543.98 128 521.58 128 495.98V143.98C128 118.6 148.4 96 176.01 96C184.696 96 193.36 98.352 201.03 103.031L489.03 279.031C503.3 287.78 512 303.28 512 319.98C512 336.68 503.297 352.21 489.03 360.93L201.03 536.93C193.4 541.58 184.7 543.98 176 543.98Z" :fill="defaultColor"/>
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      required: false,
    },
    color: {
      type: String,
      required: false,
    }
  },
  computed: {
    defaultWidth() {
      return this.size
    },
    defaultHeight() {
      return this.size
    },
    defaultColor() {
      return this.color
    }
  }
}
</script>

# ../src/assets/svg/PraySvg.vue

<template>
  <svg :width="defaultWidth" :height="defaultHeight" viewBox="0 0 640 640" :fill="defaultColor" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
    <path d="M272 255.9C254.38 255.9 240 270.25 240 287.87V367.9C240 376.775 232.875 383.9 224 383.9C215.125 383.9 208 376.775 208 367.9V291.4C208 274.03 212.75 256.9 221.75 242.03L299.5 112.41C308.5 97.29 303.625 77.65 288.5 68.53C273.1 59.775 255.8 64.1289 246.1 77.63C245.1 77.88 245.5 77.88 245.4 78.13L128.1 254C117.5 269.9 112 288.3 112 307.3V387.54L21.87 416.64C8.75 421.9 0 434.1 0 447.9V543.89C0 554.77 8.5 574.99 32 574.99C34.75 574.99 37.375 574.74 40 573.99L219.3 527.37C269.1 514 304 467.8 304 415.9V287.9C304 270.3 289.6 255.9 272 255.9ZM618.1 417.6L528 387.6V307.4C528 288.4 522.5 270.03 511.88 254.15L394.58 78.25C394.455 78 393.955 78.0013 393.83 77.7513C384.205 64.2513 365.95 59.9013 351.45 68.5223C336.33 77.6473 331.45 97.2823 340.45 112.532L418.2 242.032C427.3 257 432 274 432 291.5V367.99C432 376.865 424.875 383.99 416 383.99C407.125 383.99 400 376.865 400 367.99V287.1C400 269.48 385.62 255.13 368 255.13C350.38 255.13 336 269.51 336 286.23V413.33C336 465.2 370.88 511.45 420.75 525.73L600 575C602.6 575.6 605.4 576 608 576C631.5 576 640 554.75 640 544.9V448.91C640 434.3 631.3 422 618.1 417.6Z" :fill="defaultColor"/>
    </g>
    <defs>
    <clipPath id="clip0">
    <rect width="640" height="512" fill="white" transform="translate(0 64)"/>
    </clipPath>
    </defs>
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      required: false,
    },
    color: {
      type: String,
      required: false,
    }
  },
  computed: {
    defaultWidth() {
      return this.size
    },
    defaultHeight() {
      return this.size
    },
    defaultColor() {
      return this.color
    }
  }
}
</script>

# ../src/assets/svg/RainSvg.vue

<template>
  <svg :width="defaultWidth" :height="defaultHeight" viewBox="0 0 640 640" :fill="defaultColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M146.56 295.9C127.79 327.4 96 384.6 96 411.4C96 449.3 124.65 480 160 480C195.35 480 224 449.27 224 411.36C224 384.64 192.21 327.4 173.44 295.96C167.14 285.4 152.86 285.4 146.56 295.9ZM320 219.4C320 192.68 288.21 135.44 269.44 104C263.133 93.43 248.86 93.43 242.55 104C223.8 135.4 192 192.6 192 219.4C192 257.3 220.7 288 256 288C291.3 288 320 257.3 320 219.4ZM430.6 199.5C423.684 189.49 408.33 189.49 401.41 199.5C367.8 248.1 288 369.2 288 422.3C288 489.5 345.3 544 416 544C486.7 544 544 489.5 544 422.3C544 369.2 464.2 248.1 430.6 199.5Z" :fill="defaultColor"/>
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      required: false,
    },
    color: {
      type: String,
      required: false,
    }
  },
  computed: {
    defaultWidth() {
      return this.size
    },
    defaultHeight() {
      return this.size
    },
    defaultColor() {
      return this.color
    }
  }
}
</script>

# ../src/assets/svg/SpaceSvg.vue

<template>
  <svg :width="defaultWidth" :height="defaultHeight" viewBox="0 0 640 640" :fill="defaultColor" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
    <path d="M323.7 150L373.36 170.63L393.98 220.3C395.105 222.675 397.478 224.007 399.978 224.007C402.478 224.007 404.854 222.675 405.979 220.3L426.599 170.63L476.219 150C478.594 148.875 479.967 146.499 479.967 143.998C479.967 141.497 478.594 139.124 476.219 137.999L426.6 117.38L405.98 67.75C404.9 65.375 402.5 64 400 64C397.5 64 395.128 65.375 394.003 67.75L373.383 117.38L323.723 138.01C321.348 139.135 320.011 141.509 320.011 144.009C320.011 146.509 321.3 148.88 323.7 150ZM428.2 331.2L323.4 315.92L276.6 220.7C268.225 203.7 243.88 203.57 235.38 220.7L188.5 315.1L83.71 331.2C64.8322 333.1 57.258 357.2 71.007 370.5L146.877 444.5L129.777 549.1C126.652 567.98 146.477 582.15 163.097 573.28L256.887 523.9L350.627 573.28C358.377 577.405 367.757 576.666 374.877 571.541C380.977 566.416 385.497 557.631 383.996 549.131L365.2 444.5L441.12 370.5C454.7 357.3 447.1 333.1 428.2 331.2ZM573 283.3L533.38 266.67L516.76 227.04C515.885 225.165 514.009 224.037 512.009 224.037C510.009 224.037 508.135 225.165 507.26 227.04L490.64 266.67L451 283.3C449.125 284.175 447.998 286.046 447.998 288.046C447.998 290.046 449.125 291.925 451 292.8L490.62 309.43L507.24 349.06C508.115 350.935 509.989 352.055 511.989 352.055C513.989 352.055 515.865 350.935 516.74 349.06L533.36 309.43L572.98 292.8C574.9 291.9 576 290 576 288C576 286 574.9 284.1 573 283.3Z" :fill="defaultColor"/>
    </g>
    <defs>
    <clipPath id="clip0">
    <rect width="512" height="512" fill="white" transform="translate(64 64)"/>
    </clipPath>
    </defs>
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      required: false,
    },
    color: {
      type: String,
      required: false,
    }
  },
  computed: {
    defaultWidth() {
      return this.size
    },
    defaultHeight() {
      return this.size
    },
    defaultColor() {
      return this.color
    }
  }
}
</script>

[ 2.4 ] Assets Videos

From https://www.videvo.net/ download and import 4 background videos in assets.

src
|
|-- assets -- videos -- bird.mp4
                    |-- rain.mp4
                    |-- space-galaxy.mp4
                    |-- sunny-beach.mp4

All assets are imported now ! Let's create all components 🙂

[ 3.1 ] ContainerBackground.vue

Add a new folder "container" in "../src/components" and create a new component "ContainerBackground.vue"

# ../src/components/container/ContainerBackground.vue

<template>
  <div class="video-container">
    <video
      v-if="vibeSelected === 'space'"
      class="video-wrapper"
      autoplay
      muted
      loop
    >
      <source
        :src="updateBackground"
        type="video/mp4"
        rel='preload'
      />
    </video>
    <video
      v-if="vibeSelected === 'beach'"
      class="video-wrapper"
      autoplay
      muted
      loop
    >
      <source
        :src="updateBackground"
        type="video/mp4"
        rel='preload'
      />
    </video>
    <video
      v-if="vibeSelected === 'rain'"
      class="video-wrapper"
      autoplay
      muted
      loop
    >
      <source
        :src="updateBackground"
        type="video/mp4"
        rel='preload'
      />
    </video>
    <video
      v-if="vibeSelected === 'bird'"
      class="video-wrapper"
      autoplay
      muted
      loop
    >
      <source
        :src="updateBackground"
        type="video/mp4"
        rel='preload'
      />
    </video>
  </div>  
</template>

<script>
export default {
  computed: {
    updateBackground() {
      if (
          this.vibeSelected === 'space' || 
          this.vibeSelected === null
        ) 
      {
        return require("@/assets/videos/space-galaxy.mp4")
      } else if (this.vibeSelected === 'beach') {
        return require("@/assets/videos/sunny-beach.mp4")
      } else if (this.vibeSelected === 'rain') {
        return require("@/assets/videos/rain.mp4")
      } else {
        return require("@/assets/videos/bird.mp4")
      }
    },
    vibeSelected() {
      return this.$store.getters['vibeSelected'].value
    }
  },
}
</script>

<style>
.video-container {
  position: absolute;
  z-index: -5;
  display: flex;
  width: 100vw;
  height: 100vh;
}

.video-wrapper {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
  overflow: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-wrapper {
    width:100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .video-wrapper { 
    width:auto;
    height: 100%;
  }
}
</style>

This component change background video depending of user choice.

[ 3.2 ] ContainerPopUp.vue

Unlike the 'ContainerBackground.vue' 'ContainerPopUp.vue' is a nested component. It allow us to encapsulate functionality and easily reuse them in multiple places in this application.

ContainerPopUp.vue
   |-- ContainerSelector.vue
                     |-- Selector.vue

Firstly, Let's create 'ContainerPopUp.vue'

# ../src/components/container/ContainerPopUp.vue

<template>
  <div v-if="step < 2" class="overlay">
    <div class="popup">
      <PraySvg
        size="80"
        color="white"
      />
      <h1>Welcome to<br> Vibe Meditation App</h1>
      <ContainerSelector
        :question="questionDisplaying"
      >
        <Selector
          v-if="step === 0"
          :size="'normal'"
          :mode="'timer'"
        />
        <Selector 
           v-if="step > 0"
          :size="'normal'"
          :mode="'vibe'"
        />
      </ContainerSelector>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import PraySvg from '@/assets/svg/PraySvg'
import ContainerSelector from '@/components/container/ContainerSelector'
import Selector from '@/components/Selector'

export default {
  components: {
    PraySvg,
    ContainerSelector,
    Selector
  },
  computed: {
    questionDisplaying() {
      if (this.step === 0) {
        return 'How long do you want to meditate ?' 
      } else {
        return 'Where do you want to meditate ?'
      }
    },
    ...mapGetters([
      'timeSelected',
      'vibeSelected',
      'step'
    ])
  }
}
</script>

<style scoped>
.overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%; 
  right: 50%;
  transform: translate(50%,-50%);
  background-color: rgba(5, 5, 5, 0.900);
  border-radius: 15px;
  box-shadow: 1px 1px rgba(255, 255, 255, 0.200);
  color: white;
}

.bouton-primary {
  width: 200px;
  line-height: 30px;
  border-radius: 5px;
  margin: 30px;
  background-color: rgba(193, 99, 89, 0.800);
  border: rgba(193, 99, 89, 0.800);
  color: aliceblue;
}

.bouton-off {
  width: 200px;
  line-height: 30px;
  border-radius: 5px;
  margin: 30px;
  background-color: rgba(35, 35, 35, 0.500);
  border: white;
  color: aliceblue;
}
</style>

Second step is creating 'ContainerSelector.vue'

# ../src/components/container/ContainerSelector.vue

<template>
  <section class="selector-container">
    <h3>{{ question }}</h3>
    <div class="selector-wrapper">
      <slot></slot>
    </div>
  </section>
</template>

<script>
export default {
  props: ['question']
}
</script>

<style>
.selector-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 500px;
  justify-content: center;
}

h3, .selector-container {
  margin-bottom: 50px;
}

.selector-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; 
  justify-content: space-around;
  width: 100%;
}
</style>

Third step is creating 'Selector.vue'

# ../src/components/Selector.vue

<template>
  <div
    v-for="choice in filteredChoices"
    :key="choice.id"
    @click="selectChoice(choice.id)"
    class="choice-card"
    :class="hideUnselectedImg(choice.id)"
  >
    <img
      :src="choice.imgSrc"
      :alt="choice.name"
    >
    <label 
      :for="choice.name"
      :style="fontSizeDynamic(choice.id)"
    >
      {{ choice.name }}
    </label>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: ['size', 'mode'],
  methods: {
    hideUnselectedImg(id) {
       if (this.vibeSelected.id === id) {
        return 'img-selected'
       }
       else {
         return 'img-unselected'
       }
    },
    selectChoice(id) {
      let index = this.choices.findIndex(x => x.id === id);
      if (this.step === 0) {
        let timeSelecting = {
          id: this.choices[index].id,
          value: this.choices[index].value
        }
        this.$store.dispatch('changeTimer', timeSelecting)
        this.$store.dispatch('changeStep')
      } else {
        let vibeSelecting = {
          id: this.choices[index].id,
          value: this.choices[index].value
        }
        this.$store.dispatch('changeVibe', vibeSelecting)
        this.$store.dispatch('changeStep')
        this.$store.dispatch('activeIsPlaying')
      }
    },
    fontSizeDynamic(id) {
       if (this.timeSelected.id === id || this.vibeSelected.id === id) {
        return 'font-weight: bold;'
       }
       else {
         return 'font-weight: normal;'
       }
    },
  },
  computed: {
    filteredChoices() {
      return this.choices.filter(choice => 
        {
          if 
            ( 
              this.mode === 'timer' &&
              choice.category.includes('timer')
            )
          {
            return true
          }
          if 
            (
              this.mode === 'vibe' &&
              choice.category.includes('vibe')
            ) 
          {
            return true;
          }
        }
      )
    },
    ...mapGetters([
      'timeSelected',
      'vibeSelected',
      'step',
      'choices'
    ])
  }
}
</script>

<style scoped>
.choice-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.img-selected {
  display: none;
}

img:hover {
  opacity: 1;
}

img {
  opacity: 0.5;
  height: 100px; 
  width: 150;
}

.img-unselected {
 border-style: none;
}

label {
  margin-top: 10px;
}
</style>

Perfect ! With this first nested component, the user can select time of meditation and the virtual area where he wants to meditate.

[ 3.3 ] Sound.vue

Previously, we created files which allow us to change background video. For a better User Experience, we need to implement sound effects !

Let's create a new simple component 'Sound.vue'

# ../src/components/Sound.vue

<template>
  <audio :src="updateSound" preload="auto" autoplay loop ref="audioPlayer" />
</template>

<script>
export default {
  computed: {
    updateSound() {
      if (this.vibeSelected === 'space') {
        return require("@/assets/sounds/calmSpace.mp3")
      } else if (this.vibeSelected === 'beach') {
        return require("@/assets/sounds/beach.mp3")
      } else if (this.vibeSelected === 'rain') {
        return require("@/assets/sounds/rain.mp3")
      } else {
        return require("@/assets/sounds/songOfBirds.mp3")
      }
    },
    vibeSelected() {
      return this.$store.getters['vibeSelected'].value
    }
  },
}
</script>

[ 3.4 ] ContainerTimer.vue

Background Video, sound effects so what's next ? Timer Animation of course.

Let's create a new nested component 'ContainerTimer.vue'

ContainerTimer.vue
   |-- TimerHeader.vue
   |-- Timer.vue
   |-- TimerRemaining.vue
   |-- VibeSwitcher.vue

# ../src/components/container/ContainerTimer.vue

<template>
  <section
    v-if="step === 2"
    class="container"
  >
    <TimerHeader />
    <Timer
      :timeLeft="timeLeft"
      :timeSelected="timeSelected.value"
    />
    <TimerRemaining
      :timeLeft="timeLeft"
    />
    <VibeSwitcher />
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import Timer from '@/components/Timer.vue'
import TimerRemaining from '@/components/TimerRemaining'
import TimerHeader from '@/components/TimerHeader'
import VibeSwitcher from '@/components/VibeSwitcher'

export default {
  components: {
    Timer,
    TimerRemaining,
    TimerHeader,
    VibeSwitcher
  },
  data() {
    return {
      timeLimit: 0,
      timePassed: 0,
      timerInterval : 0,
    };
  },
  computed: {
    ...mapGetters([
      'timeSelected',
      'vibeSelected',
      'step',
      'isPlaying'
    ]),
    timeLeft() { 
      if (this.timerInterval === null) {
        return 0
      } else if (this.timePassed === this.timeSelected.value) {
        clearInterval(this.timerInterval)
        this.$store.dispatch('changeVibe', { value: 'bird' })
        this.$store.dispatch('changeStep')
        console.log('step : ', this.step)
        return 0
      } else {
        return this.timeSelected.value - this.timePassed
      }
    },
  },
  watch: {
    isPlaying(isInProgress) {
      if (isInProgress) {
        this.timerInterval = setInterval(() => (this.timePassed += 1), 1000);
      } else {
        clearInterval(this.timerInterval)
      }
    }
  },
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 400px;
  background-color: rgba(5, 5, 5, 0.700);
  border-radius: 15px;
  box-shadow: 1px 1px rgba(255, 255, 255, 0.500);
}

h1, .container {
  color: white;
  font-size: 25px;
}
</style>

# ../src/components/TimerHeader.vue

<template>
  <div 
    v-show="vibeSelected === 'space'"
    class="icon-header"
  >
    <SpaceSvg
      size="40"
      color="white"
    />
    <h1>Meditation <br> In The Space</h1>
  </div>
  <div 
    v-show="vibeSelected === 'beach'"
    class="icon-header"
  >
    <BeachSvg
      size="40"
      color="white"
    />
    <h1>Meditation <br> In On Beach</h1>
  </div>
  <div 
    v-show="vibeSelected === 'rain'"
    class="icon-header"
  >
    <RainSvg
      size="40"
      color="white"
    />
    <h1>Meditation <br> Under The Rain</h1>
  </div>
  <div 
    v-show="vibeSelected === 'alarm'"
    class="icon-header"
  >
    <RainSvg
      size="40"
      color="white"
    />
    <h1>Meditation <br> Finished</h1>
  </div>
</template>

<script>
import SpaceSvg from '@/assets/svg/SpaceSvg'
import BeachSvg from '@/assets/svg/BeachSvg'
import RainSvg from '@/assets/svg/RainSvg'

export default {
  name: 'HeaderTimer',
  components: {
    SpaceSvg,
    BeachSvg,
    RainSvg,
  },
  computed: {
    vibeSelected() {
      return this.$store.getters['vibeSelected'].value
    }
  }
}
</script>

<style scoped>
.icon-header {
  min-height: 40px;
}

h1 {
  margin-bottom: 30px;
  margin-top: 0px;
}
</style>

# ../src/components/Timer.vue

<template>
  <div class="base-timer">
    <svg
      class="base-timer__svg"
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g class="base-timer__circle">
        <circle
          class="base-timer__path-elapsed"
          cx="50"
          cy="50"
          r="45"
        />
        <path
          :stroke-dasharray="circleDasharray"
          :class="remainingPathColor"
          class="base-timer__path-remaining"
          d="
            M 50, 50
            m -45, 0
            a 45,45 0 1,0 90,0
            a 45,45 0 1,0 -90,0
          ">
        </path>
      </g>
    </svg>
    <span class="base-timer__label">
      <PlaySvg
        @click="togglePlayPause"
        v-show="!isPlaying"
        size="80"
        color="white"
      />
      <PauseSvg
        @click="togglePlayPause"
        v-show="isPlaying"
        size="80"
        color="white"
      />
    </span>
  </div>
</template>

<script>
import PlaySvg from '@/assets/svg/PlaySvg'
import PauseSvg from '@/assets/svg/PauseSvg'
import { mapGetters } from 'vuex'

export default {
  components: {
    PlaySvg,
    PauseSvg
  },
  props: {
    timeLeft: {
      type: Number,
      required: true
    },
    timeSelected: {
      type: Number,
      required: true
    },
    alertThreshold: {
      type: Number,
      default: 5
     },
    warningThreshold: {
      type: Number,
      default: 10
    },
  },
  methods: {
    togglePlayPause() {
      this.$store.dispatch('togglePlayPause')
    }
  },
  computed: {
    ...mapGetters([
      'isPlaying',
    ]),
    circleDasharray() {
      return `${(this.timeFraction * 283).toFixed(0)} 283`;
    },
    timeFraction() {
      const rawTimeFraction = this.timeLeft / this.timeSelected
      return rawTimeFraction -
        (1 / this.timeSelected) * (1 - rawTimeFraction)
    },
    formattedTimeLeft() {
      const timeLeft = this.timeLeft
      let minutes = Math.floor(timeLeft / 60)
      const hours = Math.floor(minutes / 60)
      let seconds = timeLeft % 60
      if (seconds < 10) {
        seconds = `0${seconds}`
      }
      if (minutes === 60) {
        minutes = `00`
      }
      return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
    },
    colorCodes() {
      return {
        info: {
          color: "green"
        },
        warning: {
          color: "orange",
          threshold: this.warningThreshold
        },
        alert: {
          color: "red",
          threshold: this.alertThreshold
        }
      }
    },
    remainingPathColor() {
       const { alert, warning, info } = this.colorCodes;
       if (this.timeLeft <= alert.threshold) {
         return alert.color;
       } else if (this.timeLeft <= warning.threshold) {
         return warning.color;
       } else {
         return info.color;
       }
    }
  }
}
</script>

<style scoped lang="scss">
.base-timer {
  position: relative;
  width: 250px;
  height: 250px;

  &__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
    &.green {
      color: rgb(65, 184, 131);
    }
    &.orange {
      color: orange;
    }
    &.red {
      color: rgba(193, 99, 89, 1.000);
    }
  }
  &__svg {
    /* Flips the svg and makes the animation to move left-to-right
    transform: scaleX(-1); */
  }
  &__circle {
    fill: rgba(35, 35, 35, 0.500);
    stroke: rgba(35, 35, 35, 0.500);
  }
  &__path-elapsed {
    stroke-width: 7px;
    stroke: none;
  }

    &__label {
    position: absolute;    
    width: 250px;
    height: 250px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
    cursor: pointer;
  }
}
</style>

# ../src/componnents/TimerRemaining.vue

<template>
  <span class="time-remaining">Remaining Time</span>
  <span 
    class="timer-flow"
    :style="isPlaying ? 'opacity: 1.0;' : 'opacity: 0.5'"
  >
    {{ formattedTimeLeft }}
  </span>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    timeLeft: {
      type: Number,
      required: true
    },
  },
  computed: {
    formattedTimeLeft() {
      const timeLeft = this.timeLeft
      let minutes = Math.floor(timeLeft / 60)
      const hours = Math.floor(minutes / 60)
      let seconds = timeLeft % 60
      if (seconds < 10) {
        seconds = `0${seconds}`
      }
      if (minutes === 60) {
        minutes = `00`
      }
      return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
    },
    ...mapGetters([
      'timeSelected',
      'vibeSelected',
      'step',
      'isPlaying'
    ]),
  },
}
</script>

<style>
.time-remaining {
  margin-top: 10px;
  font-weight: bold;
}

.timer-flow {
  font-size: 40px
}
</style>

# ../src/components/VibeSwitcher.vue

<template>
  <p>Would You Like Mediate Elsewhere ?</p>
  <div class="switcher">
    <span @click="selectPreviousVibe">{{ previousVibe }}</span>
    <span>  |  </span>
    <span @click="selectNextVibe">{{ nextVibe }}</span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  methods: {
    selectPreviousVibe() {
      if (this.vibeSelected.value === 'space') {
        this.$store.dispatch('changeVibe', { value: 'rain'})
      } else if (this.vibeSelected.value === 'beach') {
        this.$store.dispatch('changeVibe', { value: 'space'})
      } else {
        this.$store.dispatch('changeVibe', { value: 'beach'})
      }
    },
    selectNextVibe() {
      if (this.vibeSelected.value === 'space') {
        this.$store.dispatch('changeVibe', { value: 'beach'})
      } else if (this.vibeSelected.value === 'beach') {
        this.$store.dispatch('changeVibe', { value: 'rain'})
      } else {
        this.$store.dispatch('changeVibe', { value: 'space'})
      }
    }
  },
  computed: {
    ...mapGetters([
      'vibeSelected'
    ]),
    previousVibe() {
      if (this.vibeSelected.value === 'space') {
        return 'Under The Rain'
      } else if (this.vibeSelected.value === 'beach') {
        return 'In The Space'
      } else {
        return 'On The Beach'
      }
    },
    nextVibe() {
      if (this.vibeSelected.value === 'space') {
        return  'On The Beach'
      } else if (this.vibeSelected.value === 'beach') {
        return 'Under The Rain'
      } else {
        return 'In The Space'
      }
    }
  },
}
</script>

<style scoped>
.switcher {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

span {
  display: flex;
  cursor: pointer;
  font-size: 18px;
  margin: 10px;
}

p {
  font-size: 18px;
}
</style>

What do you think ? Nice view right ?

[ 3.5 ] ContainerLinks.vue

When Timer is over, I prepared a last view with my linkedIn, Github and my Portfolio.

You just need to replace links and Svg in this last component.

# ../src/components/container/ContainerLinks.vue

<template>
  <div 
    v-if="step === 3"
    class="container-end"
  >
    <PraySvg :size="'60'" :color="'white'"/>
    <h2>Your Meditation Is Over !</h2>
    <span>Made With Love<br> ❤️ By Sith Norvang ❤️</span>
    <div class="container-network">
      <a
        class="icon-network"
        href="https://github.com/slaoprp"
        target="_blank"
      >
        <GithubSvg :size="'80'" :color="'white'" />
        <span>Github</span>
      </a>
      <a
        class="icon-network"
        href="https://www.linkedin.com/in/sith-norvang-3a72501a5"
        target="_blank"
      >
        <LinkedInSvg  :size="'80'" :color="'white'"  />
        <span>LinkedIn</span>
      </a>
      <a 
        class="icon-network"
        href="https://www.eliyote.com"
        target="_blank"
      >
        <span>Portfolio</span>
      </a>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PraySvg from '@/assets/svg/PraySvg'
import GithubSvg from '@/assets/svg/GithubSvg'
import LinkedInSvg from '@/assets/svg/LinkedInSvg'

export default {
  components: {
    PraySvg,
    GithubSvg, 
    LinkedInSvg
  },
  methods: {
    linkTo() {
      this.$router.push('www.eliyote.com')
    }
  },
  computed: {
    ...mapGetters([
      'step',
    ]),
  }
}
</script>

<style scoped>
.container-end {
  color: white;
  width: auto;
  height: auto;
  padding: 50px;
  background-color: rgba(5, 5, 5, 0.900);
  border-radius: 15px;
  box-shadow: 1px 1px rgba(255, 255, 255, 0.200);
}

.container-network {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20px;
}

.icon-network {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: white;
}
</style>

Everything is already now ! We need to import all components in App.vue

# ../src/App.vue

<template>
  <main class="app">
    <ContainerPopUp />
    <ContainerBackground />
    <Sound />
    <ContainerTimer />
    <ContainerLinks />
  </main>
</template>

<script>
import ContainerPopUp from '@/components/container/ContainerPopUp'
import ContainerBackground from '@/components/container/ContainerBackground'
import ContainerTimer from '@/components/container/ContainerTimer'
import ContainerLinks from '@/components/container/ContainerLinks'
import Sound from '@/components/Sound'

export default {
  name: "App",
  components: {
    ContainerPopUp,
    ContainerBackground,
    ContainerTimer,
    ContainerLinks,
    Sound
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>