AppEmptyCart.vue

<template>
  <section v-if="!cart.length" class="emptycart">
    <svg
      width="200"
      height="200"
      viewBox="-949 951 100 100"
      aria-labelledby="hungry"
      role="presentation"
    >
      <title id="hungry">Hungry Man Icon</title>
      <path
        d="M-859.3 1003.3c-.3.1-.7.2-1.1.4-2 .9-13.7 6.5-13.7 6.5s-1.6-3.1-3.4-6.5c-1.8-3.4-3.9-7.2-4.9-8.5-1.4-1.8-3.2-3.3-5.2-4.3-.8-.4-1.8-.8-2.7-1.1-2.5 1.8-5.6 2.8-8.9 2.8-3.3 0-6.4-1-8.9-2.8-1 .3-1.8.7-2.7 1.1-2.1 1-3.8 2.5-5.2 4.3-1.9 2.6-8.4 15.1-8.4 15.1s-3-1.5-6.2-3-6.6-3.2-7.4-3.5c-.3-.1-.5-.2-.8-.2l-3 7.7c.4.3.8.6 1.3.8 3 1.4 17.1 8.6 18.4 8.9 1.3.3 2.9-.7 3.6-2.1l6.4-12.7-2.5 26.4c-.1 1.6.9 3 2.5 3.2 4.2.6 8.5.9 12.9.9 4.3 0 8.5-.3 12.5-.9 1.6-.2 2.7-1.6 2.5-3.2l-2.5-26.4 6.5 12.7c.7 1.4 2 2.5 3.6 2.1 1.6-.4 14.7-7.1 18.4-8.9.6-.3 1.2-.6 1.6-1v-.1l-2.7-7.7z"
      />
      <circle cx="-899.2" cy="977" r="11.7" />
      <path
        d="M-851.7 1008.8l-5.2-9.3.3-.2c1-.5 1.4-1.8.7-2.7l-3.9-5.8c-.5-.7-1.4-1-2.2-.6-.3.1-.4.5-.3.7l2.5 6 5.2 13.3c.3.8 1.3 1.2 2.1.8l.1-.1c.8-.3 1.1-1.3.7-2.1zM-937.7 998.7c.6-.2 1.1-.7 1.4-1.3l.3-.6 2.1-4.8c.1-.2 0-.4-.1-.6-.2-.2-.6-.1-.7.2 0 0-1.7 3.5-2.2 4.4-.1.1-.2.2-.4.1-.1-.1-.2-.2-.1-.4.5-1 2-4.5 2-4.5.1-.3 0-.6-.3-.6-.2-.1-.4.1-.5.3l-2.2 4.4c-.1.1-.2.2-.4.1-.1-.1-.2-.2-.1-.4.5-1 2-4.5 2-4.5.1-.3 0-.6-.3-.6-.2-.1-.4.1-.5.3l-2.4 4.7-.3.6c-.3.6-.4 1.3-.2 1.9l.4 1.2-6 10.7c-.4.8-.1 1.8.7 2.2l.1.1c.8.4 1.8 0 2.1-.8l4.5-11.4 1.1-.7z"
      />
    </svg>
    <h3>Your cart is empty!</h3>
    <nuxt-link exact to="/">
      <button class="primary">Fill it up!</button>
    </nuxt-link>
  </section>
</template>

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

export default {
  computed: {
    ...mapState(["cart"]),
  },
};
</script>

<style lang="scss" scoped></style>