Enhancing Your E-Commerce Site: Custom Fonts, Global Styles, and Layout Setup

Check this post in my web notes!

In today's article, we're diving deeper into the enhancement of our e-commerce store with Nuxt.js. Fonts play a crucial role in shaping the identity and user experience of a website, making them a key component of any successful e-commerce platform. We'll explore how to integrate custom fonts and icons into our Nuxt app, along with strategies for incorporating global and reset styles to ensure a cohesive design aesthetic. Additionally, we'll take another significant stride in the development of our store by crafting a main layout, setting the foundation for a visually appealing and user-friendly online shopping experience. If you would like to get more details about fonts integration, or layouts you can check related articles. Okay, let's outline our roadmap for today's tasks:

1. Download fonts from Google Fonts and integrate them into our Nuxt project.
2. Utilize icons effectively within our Nuxt.js application to enhance visual elements and user experience.
3. Configure global and reset styles in our new Nuxt project.
4. Take the first step of crafting our first layout.

Now that we've outlined our plan, let's dive into the practical implementation. We'll start by downloading and connecting fonts from Google Fonts to enhance the visual appeal of our e-commerce store.

1. Download fonts from Google Fonts and integrate them into our Nuxt project.

The simplest and cheapest way of getting fonts to your app is Google Fonts. We need to open Google fonts page and type in the search panel the font we need, or just scroll and choose the font we like the most. There are two options for getting fonts: get embed code (in that case we will get 2 links which we should import directly to our index.html file and fonts will be downloaded to the client each time the app is opened), and "download all" (all types of chosen fonts will be downloaded to our machine and we can use them). We will use the second option and download fonts, I like "Libre Franklin" and will use this font in my e-commerce store. Then we will create a new "assets" folder with a "fonts" folder and paste all my fonts into this folder.

After our fonts were added to the project, we needed to tell our app where to find those fonts. For that, we need to create a "styles" folder inside assets and styles.scss file. Inside that file, with the help of font-face, we will connect fonts to our project.

@font-face {
    font-family: 'LibreFranklin-Medium';
    src: url('../fonts/LibreFranklin-Medium.ttf');
}

@font-face {
    font-family: 'LibreFranklin-Regular';
    src: url('../fonts/LibreFranklin-Regular.ttf');
}

Great, we are all most ready to use fonts, let's finish with fonts in 3 parts.

Btw, if you want to get more details, check my article: Step-by-Step: Integrating Fonts in Nuxt.js and Vue.js Projects.

2. Utilize icons effectively within our Nuxt.js application to enhance visual elements and user experience.

Yes, there are many libraries with icons that will allow you to use icons directly with tags or directives. As for me, I like to download icons and store them in the project, just to be sure that they always will be available when I need them, also such a solution will prevent me from storing the whole icons library in the project. To simplify the process of using and rendering icons we will use the "nuxt-icons" module. To install it we need to use the command: "npm i nuxt-icons", and add "nuxt-icons" to the modules section in nuxt.config.js. After that, we need to create a new "icons" folder inside the "assets" folder, and all icons are pasted to that folder.

That's it we prepared the "nuxt-icons" module for future use, but if you want to get more information about the "nuxt-icons" module check Easy Way of Using Icons in Nuxt.

3. Configure global and reset styles in our new Nuxt project.

Global styles in a Nuxt project refer to CSS styles that are applied universally across all pages and components. They help maintain a consistent design language and layout throughout the entire application.

In simple words, if we have an element that styles will be repeated at many pages we can add its styles globally so that they will be the same and available at all components. Let's do that!

We had already created a "styles" folder and styles.scss file, now let's modify it a little bit. Create _fonts.scss file and move all fonts from the styles file into this special file.

Create _global.scss file, here we will add global styles in future development, for now, it will be empty.

Okay, but what about reset styles? Browser reset styles in a Nuxt project involve overriding default browser styles to ensure consistent rendering across different browsers. This practice helps create a standardized visual experience and mitigate inconsistencies in styling.

We need one more _reset.scss file that will contain styles that will clear browser default styles. We can borrow reset styles from this article.

Great, looks like we have all necessary styles for our app. We need to import them into the main styles.scss file.

@import 'fonts';
@import 'reset';
@import 'global';

And the last touch, open the nuxt.config.js file and add a new CSS key to defineNuxtConfig function with our main styles.scss file.

export default defineNuxtConfig({
  devtools: { enabled: false },
  modules: [
    'nuxt-icons',
    '@pinia/nuxt',
  ],
  css: [
    '@/assets/styles/styles.scss',
  ],
})

4. Take the first step of crafting our first layout.

The final step for today's talk, so what are layouts? Layouts in a Nuxt.js project define the overall structure and design of web pages, providing a consistent framework for rendering content. They allow for the creation of reusable templates with shared elements such as headers, footers, and navigation menus, streamlining the development process and ensuring a cohesive user experience across the site.

Let's create the first "default" layout in our project, for we need to create a "layouts" folder in the project root folder. And add the default.vue file to the "layouts" folder. Nuxt understands that all files in the "layouts" folder are layouts and that the default file will represent the main default layout.

Inside the layout.vue file we need to add Footer and Header components, they will be rendered at each route, and that will render our page.

<template>
    <div>
      <AppHeader />
          <slot />
      <AppFooter />
    </div>
</template>

<script>
import AppHeader from "@/components/navigation/AppHeader.vue";
import AppFooter from "@/components/navigation/AppFooter.vue";

export default {
  name: "DefaultLayout",

  components: {
    AppHeader,
    AppFooter
  }
}
</script>

Here we go, our first layout. Now, we need to modify our main app.vue file with component, that will wrap Nuxt pages, like here:

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

We can start our dev server with the "npm run dev" command, and see errors that Nuxt can not find AppFooter and AppHeader components. But that's ok, we will work on them in our next article.

We explored the essential elements of using Nuxt.js to improve our online store in today's post. Global styles, layouts, fonts, and icons all have a significant impact on how our online platform looks and functions. Through the integration of Google Fonts custom fonts, efficient icon usage using the nuxt-icons module, setting up global and reset styles, and creating our initial layout, we have established a solid basis for an aesthetically pleasing and intuitive e-commerce experience.

Stay tuned for our upcoming article, where we'll discuss the remaining elements and carry on constructing our e-commerce store using Nuxt.js, as we continue on our development adventure.

If you need a source code for this tutorial you can get it here.