Our Writing

Building a JAMstack shop with Strapi 4, Nuxt 3, Snipcart - part 2.

Gemma

Gemma /

This is part two in our series on how to create a JAMStack e-commerce site with Nuxt 3, Strapi 4 and Snipcart. We will build out the site’s structure, layout and any components we need in the process.

Well, fancy seeing you here, either you've accidentally stumbled across this Wahay, it looks like you've made it to the second blog post of the series, well I never, thank you ever so much for joining again. Alternatively you might have accidentally stumbled here, if that's the case and you're intrigued by what you've seen then you can skip back to the previous blog post and start building your very own candle shop 😉.

In the last blog post we set up Strapi 4- we created a collection type and added in some products, made them public so we can get them from the Nuxt 3 frontend.

We will build out the site's structure, layout, and some of the components needed during this blog post. Then, in the next blog post, we will pull through the products, create components for them, and build out more of the site.

You can watch the video or follow along below.

Here's a reminder of the code if you would like to dive straight into it, we have created example repositories for both the Nuxt and Strapi parts:

Nuxt 3 Setup

To get started today we're going to add in an .env file we're doing this so that we can easily change the API URL in one place, then when we deploy it we can easily change it to the production endpoint.

BASH
API_URL=http://localhost:1337/

Adding in environment variables in Nuxt 3

Also we need to update the nuxt.config.ts. Any environment variable we want to use in our frontend Vue code you have to tell Nuxt to expose. You do this by adding it to the publicRuntimeConfig object, like below:

JAVASCRIPT
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  // Add entry css file
  css: ['tailwindcss/tailwind.css'],
  build: {
    postcss: {
      // add Postcss options
      postcssOptions: require('./postcss.config.js'),
    },
  },
  meta: {
    link: [
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
      { href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap', rel: 'stylesheet' },
      { rel: 'preconnect', href: "https://app.snipcart.com" },
      { rel: 'preconnect', href: "https://cdn.snipcart.com" },
      { rel: 'stylesheet', href: "https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css" },

    ],
    script: [
      { src: 'https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js', async: true }
    ],
  },

  publicRuntimeConfig: {
    API_URL: process.env.API_URL
  },
})

Later on, you can access these variables in your components by using the useRuntimeConfig composable.

Now restart and check everything is still working.

Here's a reminder of what the design looks like, we'll be building this out to match it:

Screenshot 2021-12-18 at 14.05.32.png

Also here is a link to the Figma file.

Creating our main layout

So open up the terminal and get the frontend and backend running.

Next let's start working through the designs and building out each section, first we'll build out the layout and within this, there will be the header, main and footer sections.

Create a directory called layouts with a file called default.vue in it, this will be your default layout template. If you're familiar with Nuxt 2 then this won't look much different. The content from the index.vue page will come out in the slot here. Here we're just setting the default fonts and background colours with the Tailwind theme classes.

The -webkit-font-smoothing changes the rendering of the font to make it match the design

JAVASCRIPT
<template>
  <div class="relative font-body">
    <div class="pt-24 bg-brand-beige-300">
      <slot />
    </div>
  </div>
</template>



<style scoped>
body {
  -webkit-font-smoothing: antialiased;
}
</style>

Next we are going to build out the header component, which will be made up from a number of child components. There's a few elements that will look something like this:

  • Header
    • Logo icon
    • Desktop Menu
    • Cart Price
    • Cart icon
    • Mobile menu

Let's create a component for our logo, first create a directory in the root called components, then a file called logo.vue :

JAVASCRIPT
<template>
  <svg viewBox="0 0 228 72" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      class="lg:block"
      d="M90.916 22.418V28.856C90.916 29.8427 91.0147 30.5703 91.212 31.039C91.434 31.483 91.804 31.779 92.322 31.927C92.8647 32.075 93.7157 32.1613 94.875 32.186V33C91.841 32.926 89.584 32.889 88.104 32.889C86.8707 32.889 85.3167 32.9137 83.442 32.963L82.258 33V32.26C83.072 32.2107 83.664 32.112 84.034 31.964C84.4287 31.816 84.6877 31.5323 84.811 31.113C84.959 30.6937 85.033 30.0153 85.033 29.078V10.726C85.033 9.78866 84.959 9.11033 84.811 8.691C84.6877 8.27167 84.4287 7.988 84.034 7.84C83.664 7.692 83.072 7.59333 82.258 7.544V6.804C83.516 6.878 85.3907 6.915 87.882 6.915L91.989 6.878C92.4823 6.85333 93.0497 6.841 93.691 6.841C97.021 6.841 99.5617 7.507 101.313 8.839C103.064 10.1463 103.94 11.91 103.94 14.13C103.94 15.4867 103.595 16.794 102.904 18.052C102.213 19.2853 101.042 20.3213 99.389 21.16C97.761 21.9987 95.5903 22.418 92.877 22.418H90.916ZM93.21 7.544C92.544 7.544 92.0507 7.63033 91.73 7.803C91.434 7.97567 91.2243 8.284 91.101 8.728C90.9777 9.172 90.916 9.838 90.916 10.726V21.678H92.507C94.505 21.678 95.8863 21.0367 96.651 19.754C97.4157 18.4713 97.798 16.7323 97.798 14.537C97.798 12.1443 97.4403 10.3807 96.725 9.246C96.0343 8.11133 94.8627 7.544 93.21 7.544ZM107.811 4.325C108.847 4.325 109.661 4.584 110.253 5.102C110.87 5.59533 111.178 6.286 111.178 7.174C111.178 8.062 110.87 8.765 110.253 9.283C109.661 9.77633 108.847 10.023 107.811 10.023C106.775 10.023 105.949 9.77633 105.332 9.283C104.74 8.765 104.444 8.062 104.444 7.174C104.444 6.286 104.74 5.59533 105.332 5.102C105.949 4.584 106.775 4.325 107.811 4.325ZM110.697 29.559C110.697 30.5703 110.87 31.2733 111.215 31.668C111.585 32.038 112.202 32.223 113.065 32.223V33C110.598 32.9013 108.958 32.852 108.144 32.852C107.379 32.852 105.665 32.9013 103.001 33V32.223C103.889 32.223 104.506 32.038 104.851 31.668C105.196 31.2733 105.369 30.5703 105.369 29.559V17.904C105.369 16.7693 105.196 15.943 104.851 15.425C104.506 14.907 103.889 14.648 103.001 14.648V13.871C103.79 13.945 104.555 13.982 105.295 13.982C107.49 13.982 109.291 13.8093 110.697 13.464V29.559ZM121.702 13.353C122.615 13.353 123.478 13.4517 124.292 13.649C125.106 13.8463 125.784 14.1177 126.327 14.463C126.968 14.8577 127.462 15.3633 127.807 15.98C128.177 16.572 128.362 17.2257 128.362 17.941C128.362 18.8043 128.091 19.5197 127.548 20.087C127.005 20.6297 126.302 20.901 125.439 20.901C124.576 20.901 123.885 20.6543 123.367 20.161C122.849 19.6677 122.59 19.0017 122.59 18.163C122.59 17.423 122.824 16.7817 123.293 16.239C123.762 15.6963 124.341 15.3263 125.032 15.129C124.835 14.8577 124.526 14.648 124.107 14.5C123.712 14.3273 123.281 14.241 122.812 14.241C121.332 14.241 120.173 15.055 119.334 16.683C118.52 18.2863 118.113 20.3953 118.113 23.01C118.113 25.6493 118.582 27.5487 119.519 28.708C120.456 29.8673 121.628 30.447 123.034 30.447C123.873 30.447 124.711 30.225 125.55 29.781C126.413 29.337 127.19 28.56 127.881 27.45L128.51 27.672C128.017 29.2753 127.153 30.6567 125.92 31.816C124.687 32.9507 123.096 33.518 121.147 33.518C118.606 33.518 116.534 32.6793 114.931 31.002C113.328 29.3247 112.526 26.8333 112.526 23.528C112.526 21.3573 112.921 19.5073 113.71 17.978C114.499 16.4487 115.585 15.3017 116.966 14.537C118.347 13.7477 119.926 13.353 121.702 13.353ZM146.643 30.299C147.038 30.891 147.359 31.335 147.605 31.631C147.852 31.9023 148.173 32.0997 148.567 32.223V33C146.594 32.9013 145.299 32.852 144.682 32.852C143.868 32.852 142.277 32.9013 139.909 33V32.223C140.255 32.223 140.526 32.1613 140.723 32.038C140.921 31.9147 141.019 31.742 141.019 31.52C141.019 31.3967 140.958 31.2117 140.834 30.965L137.171 24.342C136.925 23.9227 136.666 23.639 136.394 23.491C136.123 23.343 135.778 23.2443 135.358 23.195V29.559C135.358 30.5703 135.519 31.2733 135.839 31.668C136.16 32.038 136.74 32.223 137.578 32.223V33C135.112 32.9013 133.508 32.852 132.768 32.852C131.93 32.852 130.228 32.9013 127.662 33V32.223C128.526 32.223 129.13 32.038 129.475 31.668C129.845 31.2733 130.03 30.5703 130.03 29.559V8.469C130.03 7.33433 129.845 6.508 129.475 5.99C129.13 5.472 128.526 5.213 127.662 5.213V4.436C128.452 4.51 129.216 4.547 129.956 4.547C132.102 4.547 133.903 4.37433 135.358 4.029V22.492C135.852 22.4427 136.271 22.344 136.616 22.196C136.986 22.048 137.307 21.826 137.578 21.53L140.39 18.792C141.204 17.978 141.611 17.2257 141.611 16.535C141.611 15.9677 141.352 15.5237 140.834 15.203C140.316 14.8577 139.626 14.6603 138.762 14.611V13.871C140.119 13.945 141.562 13.982 143.091 13.982C145.139 13.982 146.582 13.945 147.42 13.871V14.611C145.965 14.9317 144.423 15.8813 142.795 17.46L140.427 19.902L146.643 30.299ZM157.65 33.259C156.071 33.259 154.887 32.852 154.098 32.038C153.333 31.224 152.951 30.151 152.951 28.819C152.951 27.709 153.235 26.7963 153.802 26.081C154.394 25.341 155.097 24.7737 155.911 24.379C156.75 23.9843 157.81 23.565 159.093 23.121C160.45 22.6523 161.436 22.233 162.053 21.863C162.694 21.4683 163.015 20.938 163.015 20.272V17.386C163.015 16.35 162.768 15.5483 162.275 14.981C161.806 14.389 161.066 14.093 160.055 14.093C158.871 14.093 157.971 14.389 157.354 14.981C158.045 15.2277 158.575 15.5977 158.945 16.091C159.34 16.5843 159.537 17.164 159.537 17.83C159.537 18.6687 159.253 19.3347 158.686 19.828C158.119 20.3213 157.428 20.568 156.614 20.568C155.751 20.568 155.085 20.2967 154.616 19.754C154.147 19.2113 153.913 18.533 153.913 17.719C153.913 17.0283 154.073 16.4487 154.394 15.98C154.739 15.4867 155.257 15.0303 155.948 14.611C156.614 14.2163 157.428 13.908 158.39 13.686C159.377 13.464 160.45 13.353 161.609 13.353C162.818 13.353 163.866 13.4763 164.754 13.723C165.642 13.9697 166.382 14.389 166.974 14.981C167.517 15.5237 167.874 16.1897 168.047 16.979C168.244 17.7683 168.343 18.8413 168.343 20.198V30.262C168.343 30.854 168.392 31.2733 168.491 31.52C168.614 31.7667 168.836 31.89 169.157 31.89C169.527 31.89 169.971 31.6803 170.489 31.261L170.859 31.89C169.749 32.8027 168.392 33.259 166.789 33.259C165.432 33.259 164.483 32.9877 163.94 32.445C163.397 31.9023 163.114 31.1747 163.089 30.262C161.856 32.26 160.043 33.259 157.65 33.259ZM160.499 30.891C161.461 30.891 162.3 30.3853 163.015 29.374V21.789C162.719 22.2823 162.09 22.825 161.128 23.417C160.166 24.0337 159.438 24.6503 158.945 25.267C158.452 25.8837 158.205 26.7717 158.205 27.931C158.205 28.9423 158.415 29.6947 158.834 30.188C159.253 30.6567 159.808 30.891 160.499 30.891ZM91.508 40.323C92.7907 40.323 93.8143 40.4463 94.579 40.693C95.3437 40.9397 96.1207 41.2973 96.91 41.766C97.1813 41.914 97.4157 42.0373 97.613 42.136C97.835 42.2347 98.02 42.284 98.168 42.284C98.39 42.284 98.5627 42.1607 98.686 41.914C98.8093 41.6427 98.908 41.2233 98.982 40.656H99.833C99.7097 42.3087 99.648 45.1207 99.648 49.092H98.797C98.6983 47.76 98.39 46.4897 97.872 45.281C97.3787 44.0723 96.6633 43.098 95.726 42.358C94.8133 41.5933 93.7403 41.211 92.507 41.211C91.2983 41.211 90.3117 41.5563 89.547 42.247C88.807 42.913 88.437 43.8257 88.437 44.985C88.437 45.8483 88.622 46.6007 88.992 47.242C89.362 47.8833 89.88 48.4753 90.546 49.018C91.212 49.536 92.2357 50.2513 93.617 51.164L94.801 51.978C96.2563 52.94 97.4033 53.7787 98.242 54.494C99.0807 55.2093 99.759 56.048 100.277 57.01C100.82 57.9473 101.091 59.045 101.091 60.303C101.091 61.8817 100.684 63.2137 99.87 64.299C99.056 65.3597 97.946 66.1613 96.54 66.704C95.1587 67.2467 93.617 67.518 91.915 67.518C90.5337 67.518 89.3867 67.3947 88.474 67.148C87.5613 66.9013 86.7227 66.5683 85.958 66.149C85.4153 65.8037 84.996 65.631 84.7 65.631C84.478 65.631 84.3053 65.7667 84.182 66.038C84.0587 66.2847 83.96 66.6917 83.886 67.259H83.035C83.1337 65.705 83.183 62.375 83.183 57.269H84.034C84.2067 60.0317 84.8233 62.2763 85.884 64.003C86.9447 65.705 88.5727 66.556 90.768 66.556C92.1 66.556 93.1977 66.1983 94.061 65.483C94.9243 64.7677 95.356 63.744 95.356 62.412C95.356 61.0307 94.912 59.8467 94.024 58.86C93.136 57.8733 91.73 56.7633 89.806 55.53C88.326 54.568 87.142 53.7293 86.254 53.014C85.366 52.2987 84.6383 51.46 84.071 50.498C83.5037 49.5113 83.22 48.3767 83.22 47.094C83.22 45.614 83.59 44.3683 84.33 43.357C85.0947 42.321 86.106 41.5563 87.364 41.063C88.622 40.5697 90.0033 40.323 91.508 40.323ZM105.715 38.325C106.751 38.325 107.565 38.584 108.157 39.102C108.774 39.5953 109.082 40.286 109.082 41.174C109.082 42.062 108.774 42.765 108.157 43.283C107.565 43.7763 106.751 44.023 105.715 44.023C104.679 44.023 103.853 43.7763 103.236 43.283C102.644 42.765 102.348 42.062 102.348 41.174C102.348 40.286 102.644 39.5953 103.236 39.102C103.853 38.584 104.679 38.325 105.715 38.325ZM108.601 63.559C108.601 64.5703 108.774 65.2733 109.119 65.668C109.489 66.038 110.106 66.223 110.969 66.223V67C108.503 66.9013 106.862 66.852 106.048 66.852C105.284 66.852 103.569 66.9013 100.905 67V66.223C101.793 66.223 102.41 66.038 102.755 65.668C103.101 65.2733 103.273 64.5703 103.273 63.559V51.904C103.273 50.7693 103.101 49.943 102.755 49.425C102.41 48.907 101.793 48.648 100.905 48.648V47.871C101.695 47.945 102.459 47.982 103.199 47.982C105.395 47.982 107.195 47.8093 108.601 47.464V63.559ZM119.606 47.353C120.519 47.353 121.382 47.4517 122.196 47.649C123.01 47.8463 123.689 48.1177 124.231 48.463C124.873 48.8577 125.366 49.3633 125.711 49.98C126.081 50.572 126.266 51.2257 126.266 51.941C126.266 52.8043 125.995 53.5197 125.452 54.087C124.91 54.6297 124.207 54.901 123.343 54.901C122.48 54.901 121.789 54.6543 121.271 54.161C120.753 53.6677 120.494 53.0017 120.494 52.163C120.494 51.423 120.729 50.7817 121.197 50.239C121.666 49.6963 122.246 49.3263 122.936 49.129C122.739 48.8577 122.431 48.648 122.011 48.5C121.617 48.3273 121.185 48.241 120.716 48.241C119.236 48.241 118.077 49.055 117.238 50.683C116.424 52.2863 116.017 54.3953 116.017 57.01C116.017 59.6493 116.486 61.5487 117.423 62.708C118.361 63.8673 119.532 64.447 120.938 64.447C121.777 64.447 122.616 64.225 123.454 63.781C124.318 63.337 125.095 62.56 125.785 61.45L126.414 61.672C125.921 63.2753 125.058 64.6567 123.824 65.816C122.591 66.9507 121 67.518 119.051 67.518C116.511 67.518 114.439 66.6793 112.835 65.002C111.232 63.3247 110.43 60.8333 110.43 57.528C110.43 55.3573 110.825 53.5073 111.614 51.978C112.404 50.4487 113.489 49.3017 114.87 48.537C116.252 47.7477 117.83 47.353 119.606 47.353ZM144.548 64.299C144.942 64.891 145.263 65.335 145.51 65.631C145.756 65.9023 146.077 66.0997 146.472 66.223V67C144.498 66.9013 143.203 66.852 142.587 66.852C141.773 66.852 140.182 66.9013 137.814 67V66.223C138.159 66.223 138.43 66.1613 138.628 66.038C138.825 65.9147 138.924 65.742 138.924 65.52C138.924 65.3967 138.862 65.2117 138.739 64.965L135.076 58.342C134.829 57.9227 134.57 57.639 134.299 57.491C134.027 57.343 133.682 57.2443 133.263 57.195V63.559C133.263 64.5703 133.423 65.2733 133.744 65.668C134.064 66.038 134.644 66.223 135.483 66.223V67C133.016 66.9013 131.413 66.852 130.673 66.852C129.834 66.852 128.132 66.9013 125.567 67V66.223C126.43 66.223 127.034 66.038 127.38 65.668C127.75 65.2733 127.935 64.5703 127.935 63.559V42.469C127.935 41.3343 127.75 40.508 127.38 39.99C127.034 39.472 126.43 39.213 125.567 39.213V38.436C126.356 38.51 127.121 38.547 127.861 38.547C130.007 38.547 131.807 38.3743 133.263 38.029V56.492C133.756 56.4427 134.175 56.344 134.521 56.196C134.891 56.048 135.211 55.826 135.483 55.53L138.295 52.792C139.109 51.978 139.516 51.2257 139.516 50.535C139.516 49.9677 139.257 49.5237 138.739 49.203C138.221 48.8577 137.53 48.6603 136.667 48.611V47.871C138.023 47.945 139.466 47.982 140.996 47.982C143.043 47.982 144.486 47.945 145.325 47.871V48.611C143.869 48.9317 142.328 49.8813 140.7 51.46L138.332 53.902L144.548 64.299ZM181.598 40.915C182.758 40.915 183.707 40.878 184.447 40.804V41.544C183.831 41.7907 183.226 42.2717 182.634 42.987C182.067 43.6777 181.586 44.6643 181.191 45.947L174.679 67.074C174.408 67.0493 173.976 67.037 173.384 67.037C172.792 67.037 172.361 67.0493 172.089 67.074L166.65 50.572L161.174 67.074C160.903 67.0493 160.471 67.037 159.879 67.037C159.287 67.037 158.856 67.0493 158.584 67.074L150.296 43.912C150 43.098 149.643 42.506 149.223 42.136C148.804 41.766 148.385 41.5687 147.965 41.544V40.804C149.445 40.878 151.283 40.915 153.478 40.915C155.55 40.915 157.067 40.878 158.029 40.804V41.544C157.166 41.6673 156.734 42.1483 156.734 42.987C156.734 43.3817 156.845 43.9367 157.067 44.652L162.469 60.303L166.206 49.277L164.319 43.542C164.073 42.8267 163.777 42.3333 163.431 42.062C163.111 41.766 162.728 41.5933 162.284 41.544V40.804C163.666 40.878 165.429 40.915 167.575 40.915C169.993 40.915 171.769 40.878 172.903 40.804V41.544C172.015 41.5687 171.374 41.6797 170.979 41.877C170.585 42.0497 170.387 42.395 170.387 42.913C170.387 43.357 170.511 43.9367 170.757 44.652L175.826 60.118L179.341 48.944C179.909 47.094 180.192 45.6633 180.192 44.652C180.192 43.5913 179.921 42.8267 179.378 42.358C178.86 41.8647 178.071 41.5933 177.01 41.544V40.804C178.688 40.878 180.217 40.915 181.598 40.915ZM186.277 38.325C187.313 38.325 188.127 38.584 188.719 39.102C189.336 39.5953 189.644 40.286 189.644 41.174C189.644 42.062 189.336 42.765 188.719 43.283C188.127 43.7763 187.313 44.023 186.277 44.023C185.241 44.023 184.415 43.7763 183.798 43.283C183.206 42.765 182.91 42.062 182.91 41.174C182.91 40.286 183.206 39.5953 183.798 39.102C184.415 38.584 185.241 38.325 186.277 38.325ZM189.163 63.559C189.163 64.5703 189.336 65.2733 189.681 65.668C190.051 66.038 190.668 66.223 191.531 66.223V67C189.064 66.9013 187.424 66.852 186.61 66.852C185.845 66.852 184.131 66.9013 181.467 67V66.223C182.355 66.223 182.972 66.038 183.317 65.668C183.662 65.2733 183.835 64.5703 183.835 63.559V51.904C183.835 50.7693 183.662 49.943 183.317 49.425C182.972 48.907 182.355 48.648 181.467 48.648V47.871C182.256 47.945 183.021 47.982 183.761 47.982C185.956 47.982 187.757 47.8093 189.163 47.464V63.559ZM200.168 47.353C201.081 47.353 201.944 47.4517 202.758 47.649C203.572 47.8463 204.25 48.1177 204.793 48.463C205.434 48.8577 205.928 49.3633 206.273 49.98C206.643 50.572 206.828 51.2257 206.828 51.941C206.828 52.8043 206.557 53.5197 206.014 54.087C205.471 54.6297 204.768 54.901 203.905 54.901C203.042 54.901 202.351 54.6543 201.833 54.161C201.315 53.6677 201.056 53.0017 201.056 52.163C201.056 51.423 201.29 50.7817 201.759 50.239C202.228 49.6963 202.807 49.3263 203.498 49.129C203.301 48.8577 202.992 48.648 202.573 48.5C202.178 48.3273 201.747 48.241 201.278 48.241C199.798 48.241 198.639 49.055 197.8 50.683C196.986 52.2863 196.579 54.3953 196.579 57.01C196.579 59.6493 197.048 61.5487 197.985 62.708C198.922 63.8673 200.094 64.447 201.5 64.447C202.339 64.447 203.177 64.225 204.016 63.781C204.879 63.337 205.656 62.56 206.347 61.45L206.976 61.672C206.483 63.2753 205.619 64.6567 204.386 65.816C203.153 66.9507 201.562 67.518 199.613 67.518C197.072 67.518 195 66.6793 193.397 65.002C191.794 63.3247 190.992 60.8333 190.992 57.528C190.992 55.3573 191.387 53.5073 192.176 51.978C192.965 50.4487 194.051 49.3017 195.432 48.537C196.813 47.7477 198.392 47.353 200.168 47.353ZM225.11 64.299C225.504 64.891 225.825 65.335 226.072 65.631C226.318 65.9023 226.639 66.0997 227.034 66.223V67C225.06 66.9013 223.765 66.852 223.149 66.852C222.335 66.852 220.744 66.9013 218.376 67V66.223C218.721 66.223 218.992 66.1613 219.19 66.038C219.387 65.9147 219.486 65.742 219.486 65.52C219.486 65.3967 219.424 65.2117 219.301 64.965L215.638 58.342C215.391 57.9227 215.132 57.639 214.861 57.491C214.589 57.343 214.244 57.2443 213.825 57.195V63.559C213.825 64.5703 213.985 65.2733 214.306 65.668C214.626 66.038 215.206 66.223 216.045 66.223V67C213.578 66.9013 211.975 66.852 211.235 66.852C210.396 66.852 208.694 66.9013 206.129 67V66.223C206.992 66.223 207.596 66.038 207.942 65.668C208.312 65.2733 208.497 64.5703 208.497 63.559V42.469C208.497 41.3343 208.312 40.508 207.942 39.99C207.596 39.472 206.992 39.213 206.129 39.213V38.436C206.918 38.51 207.683 38.547 208.423 38.547C210.569 38.547 212.369 38.3743 213.825 38.029V56.492C214.318 56.4427 214.737 56.344 215.083 56.196C215.453 56.048 215.773 55.826 216.045 55.53L218.857 52.792C219.671 51.978 220.078 51.2257 220.078 50.535C220.078 49.9677 219.819 49.5237 219.301 49.203C218.783 48.8577 218.092 48.6603 217.229 48.611V47.871C218.585 47.945 220.028 47.982 221.558 47.982C223.605 47.982 225.048 47.945 225.887 47.871V48.611C224.431 48.9317 222.89 49.8813 221.262 51.46L218.894 53.902L225.11 64.299Z"
      fill="#4E3924"
    />
    <rect width="72" height="72" fill="#4E3924" />
    <g clip-path="url(#clip0_31:2)">
      <path
        d="M40.3291 22.9534C40.3291 21.4143 41.1266 20.3617 42.3148 18.9661C42.6176 18.6228 43.0533 18.4261 43.511 18.4261C43.9688 18.4261 44.4045 18.6228 44.7072 18.9661C45.9034 20.3457 46.7009 21.4064 46.6929 22.9534C47.2213 22.1131 47.498 21.139 47.4904 20.1463C47.4904 18.4398 45.4489 15.7284 43.503 13.7666C41.5572 15.7682 39.5157 18.4796 39.5157 20.1463C39.5129 21.1406 39.7952 22.1148 40.3291 22.9534Z"
        fill="#EAE5E0"
      />
      <path
        d="M25.9747 55.9367C31.8999 55.9367 35.5443 54.0786 35.5443 52.7468V51.9493C35.0598 50.426 34.7913 48.8422 34.7469 47.2443C34.733 46.6608 35.0388 46.1164 35.5443 45.8248V28.0253C35.5443 26.9806 33.2636 25.6329 29.4278 25.0746C28.6843 25.7489 27.7623 26.1946 26.7722 26.3586V28.0253C26.7722 28.4657 26.4151 28.8227 25.9747 28.8227C25.5343 28.8227 25.1772 28.4657 25.1772 28.0253V26.3586C24.1871 26.1946 23.2651 25.7489 22.5217 25.0746C18.6859 25.6329 16.4051 26.9806 16.4051 28.0253V52.7468C16.4051 54.0786 20.0495 55.9367 25.9747 55.9367ZM23.5823 43.1772C23.5823 44.4985 22.5112 45.5696 21.1899 45.5696C19.8686 45.5696 18.7975 44.4985 18.7975 43.1772V39.9873C18.7975 39.5469 19.1545 39.1898 19.595 39.1898C20.0354 39.1898 20.3924 39.5469 20.3924 39.9873V43.1772C20.3924 43.6176 20.7495 43.9746 21.1899 43.9746C21.6303 43.9746 21.9874 43.6176 21.9874 43.1772V41.5822C21.9874 41.1418 22.3444 40.7848 22.7848 40.7848C23.2253 40.7848 23.5823 41.1418 23.5823 41.5822V43.1772ZM31.557 49.5569C31.557 50.8782 30.4859 51.9493 29.1646 51.9493C27.8433 51.9493 26.7722 50.8782 26.7722 49.5569V46.3671C26.7722 45.9266 27.1292 45.5696 27.5697 45.5696C28.0101 45.5696 28.3671 45.9266 28.3671 46.3671V49.5569C28.3671 49.9974 28.7242 50.3544 29.1646 50.3544C29.605 50.3544 29.9621 49.9974 29.9621 49.5569V47.962C29.9621 47.5216 30.3191 47.1645 30.7595 47.1645C31.2 47.1645 31.557 47.5216 31.557 47.962V49.5569ZM33.1519 39.9873C33.1519 41.3086 32.0808 42.3797 30.7595 42.3797C29.4382 42.3797 28.3671 41.3086 28.3671 39.9873V38.3924C28.3671 37.9519 28.7242 37.5949 29.1646 37.5949C29.605 37.5949 29.9621 37.9519 29.9621 38.3924V39.9873C29.9621 40.4277 30.3191 40.7848 30.7595 40.7848C31.2 40.7848 31.557 40.4277 31.557 39.9873V36.7974C31.557 36.357 31.914 36 32.3545 36C32.7949 36 33.1519 36.357 33.1519 36.7974V39.9873ZM18.0479 30.625C18.1214 30.4258 18.2713 30.2641 18.4644 30.1758C18.6575 30.0875 18.8778 30.0798 19.0766 30.1545C23.5664 31.5699 28.383 31.5699 32.8728 30.1545C33.0716 30.0798 33.2919 30.0875 33.4851 30.1758C33.6782 30.2641 33.8281 30.4258 33.9016 30.625C33.9763 30.8238 33.9686 31.0442 33.8803 31.2373C33.792 31.4304 33.6303 31.5803 33.431 31.6538C28.5793 33.193 23.3701 33.193 18.5184 31.6538C18.3192 31.5803 18.1575 31.4304 18.0692 31.2373C17.9808 31.0442 17.9732 30.8238 18.0479 30.625Z"
        fill="#EAE5E0"
      />
      <path
        d="M43.519 20.0506C43.1017 20.5381 42.7129 21.0493 42.3547 21.5817C41.7616 22.3778 41.7846 23.4748 42.4105 24.2453C43.9177 25.9359 46.031 23.5674 44.6992 21.5817C44.337 21.048 43.9429 20.5367 43.519 20.0506Z"
        fill="#EAE5E0"
      />
      <path
        d="M29.962 20.1463C29.962 18.4398 27.9205 15.7284 25.9747 13.7666C24.0289 15.7682 21.9873 18.4796 21.9873 20.1463C21.9797 21.139 22.2565 22.1131 22.7848 22.9534C22.7848 21.3585 23.5823 20.3457 24.7705 18.9661C25.0733 18.6228 25.509 18.4261 25.9667 18.4261C26.4244 18.4261 26.8601 18.6228 27.1629 18.9661C28.2953 20.2819 29.1566 21.3585 29.1486 22.9534C29.6825 22.1148 29.9648 21.1406 29.962 20.1463Z"
        fill="#EAE5E0"
      />
      <path
        d="M25.9746 20.0506C25.5604 20.5406 25.1718 21.0517 24.8103 21.5817C24.2173 22.3778 24.2403 23.4748 24.8662 24.2453C26.3574 25.9279 28.4946 23.5834 27.1549 21.5817C26.7959 21.0457 26.4016 20.5342 25.9746 20.0506Z"
        fill="#EAE5E0"
      />
      <path
        d="M49.508 58.3291C51.1907 58.2893 55.3853 57.9224 58.017 55.3705C60.6486 52.8186 61.0155 48.7595 61.0633 47.1646C59.3807 47.2124 55.186 47.5793 52.5543 50.1312C49.9227 52.6831 49.5479 56.7342 49.508 58.3291ZM53.4953 55.1393C56.0153 54.3019 57.4827 52.8984 58.1845 50.0275C58.2557 49.7511 58.4689 49.5338 58.7439 49.4573C59.0188 49.3808 59.3137 49.4568 59.5174 49.6566C59.7212 49.8565 59.8028 50.1499 59.7315 50.4262C58.8464 53.8474 56.9962 55.6736 53.9977 56.6545C53.5794 56.7907 53.1297 56.5623 52.9929 56.1441C52.8529 55.737 53.0611 55.2923 53.4634 55.1393H53.4953Z"
        fill="#EAE5E0"
      />
      <path
        d="M51.063 46.8855C50.8778 47.1034 50.5904 47.206 50.3091 47.1546C50.0277 47.1032 49.7951 46.9056 49.699 46.6363C49.6028 46.3669 49.6577 46.0667 49.8429 45.8488C50.2746 45.3554 50.7496 44.9017 51.2624 44.4931C50.5518 43.1585 49.6844 41.9137 48.6786 40.7849C47.7013 41.9374 46.8461 43.1881 46.1267 44.517C46.6231 44.9215 47.0846 45.367 47.5063 45.8488C47.7926 46.1835 47.7533 46.6869 47.4186 46.9732C47.0838 47.2595 46.5804 47.2202 46.2941 46.8855C44.8573 45.3481 43.0904 44.1565 41.1265 43.4005C40.8149 44.2809 40.5749 45.185 40.4088 46.104C44.9065 47.2124 47.4664 49.6686 48.7344 53.6002C50.0024 49.6607 52.5543 47.2204 57.0041 46.1199C56.8402 45.1926 56.6001 44.2804 56.2864 43.3926C54.3035 44.1469 52.5176 45.3412 51.063 46.8855Z"
        fill="#EAE5E0"
      />
      <path
        d="M44.8507 50.1312C42.7215 48.0657 39.101 47.1646 36.3417 47.1646C36.3896 48.7595 36.7724 52.8186 39.3881 55.3546C42.0038 57.8905 46.2144 58.2813 47.8971 58.3291C47.8572 56.7342 47.5063 52.6671 44.8507 50.1312Z"
        fill="#EAE5E0"
      />
      <path
        d="M37.1393 28.0253V30.33C41.4877 31.567 46.1029 31.506 50.4171 30.1545C50.6159 30.0798 50.8363 30.0875 51.0294 30.1758C51.2225 30.2641 51.3724 30.4258 51.4459 30.625C51.5206 30.8238 51.5129 31.0442 51.4246 31.2373C51.3363 31.4304 51.1746 31.5803 50.9754 31.6538C46.4895 33.0761 41.6928 33.2005 37.1393 32.0126V45.6095C37.6258 45.6095 38.192 45.6972 38.814 45.7929C38.9989 44.7944 39.2656 43.8129 39.6114 42.8582C39.7578 42.4499 40.0642 42.1189 40.4599 41.9414C40.8556 41.7639 41.3065 41.7551 41.7088 41.9172C42.7975 42.352 43.8439 42.8859 44.8349 43.5121C45.5826 42.1521 46.4785 40.879 47.5064 39.7162C47.8002 39.3804 48.2246 39.1878 48.6707 39.1878C49.1168 39.1878 49.5412 39.3804 49.835 39.7162C50.8741 40.8813 51.7783 42.16 52.5304 43.5281L53.0887 43.1772V28.0253C53.0887 26.9806 50.8079 25.6329 46.9721 25.0746C46.2286 25.7489 45.3067 26.1946 44.3165 26.3586V28.0253C44.3165 28.4657 43.9595 28.8227 43.519 28.8227C43.0786 28.8227 42.7216 28.4657 42.7216 28.0253V26.3586C41.7314 26.1946 40.8095 25.7489 40.066 25.0746C38.746 25.2385 37.4518 25.568 36.2142 26.0555C36.7771 26.5594 37.1111 27.2704 37.1393 28.0253Z"
        fill="#EAE5E0"
      />
    </g>
    <defs>
      <clipPath id="clip0_31:2">
        <rect width="44.6582" height="44.6582" fill="white" transform="translate(16.4051 13.6709)" />
      </clipPath>
    </defs>
  </svg>
</template>

Now let’s build out the desktop navigation, they aren't going to link yet because that will break the site. Create a file called NavBar.vue in the components directory.

JAVASCRIPT
<template>
  <nav>
    <ul class="flex flex-col items-center justify-center gap-6 text-center md:flex-row">
      <li
        class="text-xl font-bold tracking-tighter transition-colors text-brand-grey-800 font-heading hover:text-brand-orange"
      >
        <nuxt-link to="/">Home</nuxt-link>
      </li>
      <li
        class="text-xl font-bold tracking-tighter transition-colors text-brand-grey-800 font-heading hover:text-brand-orange"
      >
        <nuxt-link to="/">Shop</nuxt-link>
      </li>
      <li
        class="text-xl font-bold tracking-tighter transition-colors text-brand-grey-800 font-heading hover:text-brand-orange"
      >
        <nuxt-link to="/">Contact</nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<style scoped>
.router-link-active {
  @apply text-brand-orange;
}
</style>

We now need to create the CartInfo.vue component , in the next post we will be adding in the cart total but for now we're just going to have the icon in there.

JAVASCRIPT
<template>
  <button class="flex items-center">
    <IconsCart class="w-6" />
  </button>
</template>

Next up we will build our main header component that will be made up of the child components we just created.

JAVASCRIPT
<template>
  <header>
    test
  </header>
</template>

Now we can pull this into our default.vue layout, and just test we are pulling in the header correctly, it will look something like this:

JAVASCRIPT
<template>
  <div class="relative font-body">
    <HeaderSection />
    <section class="pt-24 bg-brand-beige-300">
      <slot />
    </section>
  </div>
</template>



<style scoped>
body {
  -webkit-font-smoothing: antialiased;
}
</style>

In the HeaderSection.vue we can now import the components that we built earlier. The way that I would usually do this is by adding in 1 by 1 at a time and just go check the frontend to check everything is okay. But for ease I've just added them all in straight away:

JAVASCRIPT
<template>
  <header class="fixed z-50 w-full py-2">
    <div class="grid items-center w-full grid-cols-12 px-4 mx-auto">
      <div class="col-span-3">
        <nuxt-link to="/">
          <Logo class="h-20 py-2" />
        </nuxt-link>
      </div>
      <div class="col-span-6">
        <NavBar class="md:block" />
      </div>
      <div class="flex items-center justify-end col-span-3">
        <CartInfo />
      </div>
    </div>
  </header>
</template>

Nuxt 3 auto import components

You'll see here you don't need to import components and declare them like you used to. Nuxt 3 auto imports components for you. Which makes components quicker to write, less crowded and easier to read. If you have your component inside a nested directory like this :

Screenshot 2021-12-18 at 14.59.48.png

Then the name of the component inside your template will be named like this <IconsCart />.

Let's go and check everything looks as it should:

Screenshot 2021-12-18 at 15.02.43.png

Before we move on we're going to add in the mobile menu. Add in a new file into the components directory called MobileMenu.vue

JAVASCRIPT
<template>
  <nav class="fixed inset-0 z-50 flex items-center justify-center bg-brand-beige-300">
    <button
      class="absolute p-1 right-4 top-8 text-brand-grey-800"
      title="Close"
      @click="$emit('close')"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-6 h-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M6 18L18 6M6 6l12 12"
        />
      </svg>
    </button>
    <NavBar />
  </nav>
</template>

<script setup>
const route = useRoute();
const emit = defineEmits(['close'])

watch(route, () => {
  emit('close');
});
</script>

<style>
</style>

Using the Vue 3 composition API

useRoute allows us to get the current route and the defineEmits basically tells the component that it can emit an event called close, then we use the watch API to emit the close event whenever the route changes. The mobile menu will close when you change routes.

Next, we are going to update our HeaderSection.vue to pull in the MobileMenu.vue, add some transitions to it and hide the desktop menu. So open up your HeaderSection.vue and your code should now look like this:

JAVASCRIPT
<template>
  <header class="fixed z-50 w-full py-2">
    <div class="grid items-center w-full grid-cols-12 px-4 mx-auto">
      <div class="col-span-3">
        <nuxt-link to="/">
          <Logo class="h-20 py-2" />
        </nuxt-link>
      </div>
      <div class="col-span-6">
        <NavBar class="hidden md:block" />
      </div>
      <div class="flex items-center justify-end col-span-3">
        <CartInfo />

        <button title="Menu" class="p-1 ml-4" @click="mobileMenuOpen = true">
          <svg
            class="w-6 h-6 md:hidden text-brand-grey-800"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
        </button>
      </div>
    </div>
    <transition name="menu">
      <MobileMenu v-if="mobileMenuOpen" @close="mobileMenuOpen = false" />
    </transition>
  </header>
</template>

<script setup>
const mobileMenuOpen = ref(false);
</script>

<style scoped>
header {
  background: rgba(227, 217, 205, 0.8);
}

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

.menu-enter-from,
.menu-leave-to {
  opacity: 0;
}
</style>

Now let's just go and tidy up the app.vue , add in the background colour and add a meta title.

JAVASCRIPT
<template>
  <Title>Pick a Sick Wick - Candle Shop</Title>
  <NuxtPage />
</template>

<style>
body {
  @apply text-brand-grey bg-brand-beige-300;
}

</style>

Nuxt 3 Meta components

It's now really easy to add in a meta title and other meta elements in Nuxt 3, thye have made a number of conponents that oyu can use in other components and it will add to your pages meta. In this case we're just using the title component to add a title to our site.

Wooo we're in a good place to start building out the rest of the site. Lets start adding a few components that are useful in any site.

Creating a heading component

Adding a heading component like this means you all your headings will match your design system perfectly. So lets go ahead and create our heading.vue inside the components directory.

JAVASCRIPT
<template>
  <component :is="tag" v-bind="$attrs" :class="classes">
    <slot />
  </component>
</template>

<script setup>
import { computed } from 'vue';


const props = defineProps({
  tag: String,
  fontStyle: {
    type: String,
    required: false,
    default: 'h1',
    validator: (value) => ['h1', 'h2', 'h3', 'h4'].includes(value),
  },
  color: {
    type: String,
    required: false,
    default: 'text-brand-brown-500',
  }
});

const classes = computed(() => {
  const styleClasses = {
    h1: 'pb-2 text-5xl font-bold tracking-tighter font-heading leading-none',
    h2: 'pb-2 text-4xl font-bold tracking-tighter font-heading leading-none',
    h3: 'text-xl leading-none font-extralight',
    h4: 'pb-2 text-3xl font-bold tracking-tighter font-heading leading-none',
  }
  return ` ${styleClasses[props.fontStyle]} ${props.color}`;
});
</script>

This is handy for keeping all heading styles consistent, and means you only have to change them in 1 place rather than multiple.

If you're using the <script setup> you create your props by using the defineProps function.

Container component

We normally create a Container component in any site. It helps us consistently size, horizontally centre and add padding to its children. Lets add that into the components directory and should look like this:

JAVASCRIPT
<template>
  <div class="container px-4 mx-auto">
    <slot />
  </div>
</template>

Button component

Every project needs a button component, so let's go ahead and add that with it's two different styles. We pass in a theme prop that then is used to choose the set of classes that should be applied using a computed property. Here we will have multiple classes that apply to each of the button themes.

JAVASCRIPT
<template>
  <button v-bind="$attrs" :class="classes">
    <slot />
  </button>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  theme: {
    type: String,
    required: false,
    default: 'primary',
    validator: (value) => ['primary', 'secondary'].includes(value),
  },
});

const classes = computed(() => {
  const themeClasses = {
    'primary': 'px-6 py-4 text-2xl font-bold text-white shadow-xl bg-brand-orange font-heading rounded-none',
    'secondary': 'px-6 py-4 text-2xl font-bold text-brand-orange border border-3 border-brand-orange font-heading rounded-none',
  }
  return themeClasses[props.theme];
});

</script>

Right! Time to build out the footer, create a file in your components directory called footer.vue that will look something like this:

JAVASCRIPT
<template>
  <footer class="py-12 text-white bg-brand-grey-800">
    <Container class="grid grid-cols-12 gap-6">
      <div class="col-span-12 md:col-span-6">
        <img :src="LogoWhite" class="w-32" alt="Pick a Sick Wick" />
        <p
          class="py-4 md:w-4/5"
        >Pick a Sick Wick is a JAMStack demo site built with Nuxt 3, Strapi 4 and Snipcart. If you are interested in how it was built, find out more here: JAMStack E-commerce with Nuxt 3, Strapi 4, and Snipcart.</p>
      </div>
      <div class="col-span-12 md:col-span-3">
        <Heading tag="h4" font-style="h4" color="text-white">Menu</Heading>
        <ul>
          <li class="underline list-disc list-inside">
            <nuxt-link to="/">Home</nuxt-link>
          </li>
          <li class="underline list-disc list-inside">
            <nuxt-link to="/">About</nuxt-link>
          </li>
          <li class="underline list-disc list-inside">
            <nuxt-link to="/shop">Shop</nuxt-link>
          </li>
          <li class="underline list-disc list-inside">
            <nuxt-link to="/contact">Contact</nuxt-link>
          </li>
        </ul>
      </div>
      <div class="col-span-12 md:col-span-3">
        <Heading tag="h4" font-style="h4" color="text-white">Contact</Heading>
        <p>The Wick Factory,</p>
        <p>Flame Lane,</p>
        <p>Waxiton,</p>
        <p>BN1 5TB</p>
        <p>United Kingdom</p>
      </div>
    </Container>
  </footer>
</template>

<script setup>
// We have to import images like this because Nuxt build doesn't incude them otherwsie
import LogoWhite from 'assets/images/logo-white.svg';
</script>

Lets import them into the layout and check they're working, your default.vue should look something like this

JAVASCRIPT
<template>
  <div class="relative font-body">
    <HeaderSection />
    <section class="pt-12 bg-brand-beige-300">
      <slot />
    </section>
    <FooterSection />
  </div>
</template>

<style scoped>
body {
  -webkit-font-smoothing: antialiased;
}
header {
  background: rgba(0, 0, 0, 0.1);
}
</style>

Then your frontend should look like this:

Screenshot 2021-12-18 at 15.11.13.png

Let's go update the juicy parts of the site, the main content. First we're going

Add a couple of new directories assets/images into the route of the director. Inside this we need to add in our main image that's going to sit at the top of the homepage.

header-bg.jpeg

Next update the index.vue

JAVASCRIPT
<template>
  <div>
    <section class="relative mb-20 -mt-24 border-b-4 md:mb-10 header border-brand-beige">
      <div class="absolute inset-0 z-0 overflow-hidden">
        <img :src="HeaderBg" class="object-cover w-full h-full" alt="Pick a sick wick" />
      </div>
      <div class="relative z-20 h-full header-content">
        <div class="absolute flex flex-col justify-center p-8 mx-auto hero-box">
          <div class="relative px-6 py-8 bg-white rounded-lg drop-shadow-2xl">
            <Heading tag="h3" font-style="h3">Smelly candles</Heading>
            <Heading tag="h2" font-style="h2">Only the sickest wicks</Heading>
            <p class="pb-4 pr-4 text-brand-gray font-body">
              If you’re like us and can’t get enough of burning
              things in your own home, pick a sick wick and
              <span
                class="font-bold"
              >feed your burning habbit safely with added benifit of smelling delicious.</span>
            </p>
            <Btn class="absolute md:-right-3 md:-bottom-3">Shop Now</Btn>
          </div>
        </div>
      </div>
    </section>
    <section class="mb-28">
      <Container>
        <div class="w-full mx-auto mb-12 text-center md:w-2/3 lg:w-1/3">
          <Heading tag="h2" font-style="h3">Our Candles</Heading>
          <Heading tag="h3" font-style="h2" class="mb-2">Show me the sick wicks</Heading>
          <p>All our candles our hand made and 100% verified to satisfy any pyromaniac’s itch to burn things in a safe way.</p>
        </div>
        <div class="flex justify-center mt-10">
          <Btn theme="secondary">View all the sick wicks</Btn>
        </div>
      </Container>
    </section>
  </div>
</template>

<script setup>
//We we're having issues with Nuxt importing images into this template but this work around fixes things
import HeaderBg from 'assets/images/header-bg.jpg';


</script>

<style scoped>
.header {
  height: 600px;

}

@screen md {
  .hero-box {
    left: 10%;
    top: 175px;
    width: 485px;
  }
}
@screen md {
  .header {
    height: 700px;
  }
}

@screen md {
  .home-head-image {
    top: -110px;
    height: 770px;
    width: 100%;
  }
}

.hero-box {
  bottom: -50px;
  left: 0px;
  width: 100%;
}

@screen md {
  .hero-box {
    left: 10%;
    top: 100px;
    width: 485px;
  }
}
</style>

Okay great, you should now have something that looks like this now

Screenshot 2021-12-18 at 15.20.19.png

Yayyy! One step closer to getting that shop of yours set up. That's the end of this tutorial, we hope it's been helpful and you've got a lot from it, if you have any questions feel free to get in touch and ask any more questions via our website or Twitter. Thanks for taking the time to read it. The next one is going to be about getting the products in from Strapi and it will be out very shortly. You can also subscribe to our newsletter on the right hand side of the page.

Thanks again! 👋 😘

Related posts.

Creating an internationalised site with Strapi and Nuxt

We were really excited when Strapi released a new update a few weeks ago that included internationalisation! This post will show you the basics of creating an internationalised site using Strapi and Nuxt.

Read more

Dynamic social images with Nuxt, Cloud Functions and Cloudinary

Every little helps when trying to get your content noticed on social media, and having an eye-catching sharing image could be the difference between getting someone passing you by or someone clicking through. This post will guide you by creating dynamic social sharing images unique to each page/post using Firebase cloud functions, Cloudinary and Nuxt.

Read more