Simply copy and paste the following command line in your terminal to create your first Strapi project.

Get Started

*This article is part of a guest series by the great [Ekene Eze](https://twitter.com/kenny_io). He’s leading the Developer Experience team at [Flutterwave](https://flutterwave.com/us/) and wrote this blog post through the [Write for the Community program](//write-for-the-community).*

This series will walk you through the processes of setting up your own food ordering application and by extension any e-commerce app using modern development tools like [Strapi](https://strapi.io/), [Gridsome](https://gridsome.org/) and [Snipcart](https://snipcart.com/).


Table of Contents:
1. Part 1 - [Generating a Strapi app and creating products](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-1-6)
2. Part 2 - [Setting up a Gridsome project](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-2-6)
3. Part 3 - [Consuming products with Gridsome and GraphQL](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-3-6)
4. Part 4 - [Creating single product views with Gridsome templates](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-4-6)
5. Part 5 - [Implementing cart and checkout with Snipcart](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-5-6)
6. Part 6 - [Deploying the apps](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-6-6)


In [the last part](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-2-6), we walked through the process of setting up a Strapi application and creating products for our application. In this part, we will connect our Gridsome app with the Strapi app we created in the first part to fetch products and display for users.
https://mealzers.netlify.app



Consuming products with Gridsome and GraphQL
--------------

Fetch products
--------------

The products we'll display in our Gridsome application will come from the Strapi products endpoint. Luckily for us, Gridsome makes it possible for us to fetch data from the Strapi products endpoint into the GraphQL data layer that manages the data for our Gridsome application.

To do this, we need to install Axios. [Axios](https://www.npmjs.com/package/axios) is a promise-based HTTP client for the browser that makes it possible for you to communicate between different services. Run the following command to install Axios:

`npm i axios`

With Axios installed, open the project's `gridsome.server.js` file and update it with the snippet below:

```javascript

//gridsome.server.js
const axios = require("axios");
module.exports = function(api) {
    // whitelist vuetify for webpack code here 
  };

  api.loadSource(async (actions) => {
    const { data } = await axios.get("http://localhost:1337/products");
    const collection = actions.addCollection({
      typeName: "Product",
    });
    for (const product of data) {
      collection.addNode({
        id: product.id,
        title: product.title,
        price: product.price,
        rating: product.rating,
        description: product.description,
        image: product.image.formats.thumbnail.url,
        instructions: product.instructions,
      });
    }
  });
  api.createPages(({ createPage }) => {
    // Use the Pages API here: https://gridsome.org/docs/pages-api/
  });

```

Here, we are making a basic API call to fetch a list of products from our Strapi products endpoint which I'm running locally at `localhost:1337/products`. You can consider collection in the above snippet as an array where we'll push each individual product returned from the endpoint. Hence, `collection.addNode` is the equivalence of the regular `array.push`.

Each node contains all the details we want to get from a product, like the title, description, price etc. As a result, we can loop through the entire data returned and get the individual products as well as their respective details.

Display products
----------------

Having fetched these products from Strapi, we can display them for users to interact with on the frontend. To do that, first let's create a new `src/components/Products.vue` component. Within this component, we'll create the template to organize the products using Vuetify's card components. Update it with the snippet below:

```javascript

// src/components/Products.vue
<template>
  <div>
    <h1
      v-if="show"
      align="center"
      justify="center"
      class="py-5 orange white--text"
    >
      {{ banner }}
    </h1>
    <v-container class="mb-3">
      <v-row :align="align" no-gutters>
        <v-col md="4" v-for="edge in $page.products.edges" :key="edge.node.id">
          <g-link
            :to="`/products/${edge.node.id}`"
            style="text-decoration: none; color: inherit"
          >
            <v-card :loading="loading" class="ma-3" shaped>
              <v-img
                height="250"
                :src="`http://localhost:1337${edge.node.image}`"
              ></v-img>
              <v-card-title>{{ edge.node.title }}</v-card-title>
              <v-card-text>
                <v-row align="center" class="mx-0">
                  <v-rating
                    :value="edge.node.rating"
                    color="amber"
                    dense
                    half-increments
                    readonly
                    size="14"
                  ></v-rating>
            
                </v-row>
                <div class="my-4 subtitle-1">$ {{ edge.node.price }}</div>
                <div>
                  {{ `${edge.node.description.slice(0, 120)}...` }}
                </div>
              </v-card-text>
              <v-card-actions>
                <v-btn
                  rounded
                  outlined
                  color="orange"
                  text
                >
                  Add to cart
                </v-btn>
              </v-card-actions>
            </v-card>
          </g-link>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>
<script>
export default {
  props: ["banner", "show"],
};
</script>
```

At the moment, all we've done is create a Vuetify template that will hold the product data coming from our GraphQL data layer. We have provisioned fields for product description, price, title, rating, and image. To show this component to the users, we'll have to render it in the Index page. So let's do minor updates to the `index.vue` file.

In the script section, import the Products component like so:

```
//index.vue
import Products from "@/components/Products.vue";
```

In the template section, just after the <Carousel/> render the Product component like so:

```
//index.vue
<Products show="false" banner="Best Sellers" />
```

Finally to get all the products data we need to render here from our data layer, let's  define a GraphQL query on our Product type:

```javascript

// src/pages/index.vue
<page-query>
query{
  products: allProduct{
    edges{
      node{
        id,
        title,
        description,
        rating,
        price,
        image
      }
    }
  }
}
</page-query>
```

Here, we are querying for the product details from our GraphQL data layer to use in the template. In the query above, consider edges to be a regular array of products and node to be the individual product. Before we proceed, let's run this query in the GraphQL explorer and see what the result look like:

```javascript

{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "id": "7",
            "title": "Seafood",
            "description": "Seafood is any form of sea life regarded as food by humans. Seafood prominently includes fish and shellfish. Shellfish include various species of molluscs, crustaceans, and echinoderms. Historically, sea mammals such as whales and dolphins have been consumed as food, though that happens to a lesser extent in modern times",
            "price": 300,
            "rating": 5,
            "image": "/uploads/thumbnail_seafood_d3e69aad71.png"
          }
        },
        {
          "node": {
            "id": "6",
            "title": "Sandwich",
            "description": "Spread mayo, butter or cream cheese all the way to the edges of each slice of bread to create a seal against wet sandwich fillings. Also, try packing high moisture ingredients, like tomatoes, pickles, and cucumbers, separately",
            "price": 150,
            "rating": 3,
            "image": "/uploads/thumbnail_miscellaneous_e0812098cf.png"
          }
        },
        {
          "node": {
            "id": "5",
            "title": "Dessert",
            "description": "Dessert is a course that concludes a meal. The course usually consists of sweet foods, such as confections dishes or fruit, and possibly a beverage such as dessert wine or liqueur, however in the United States it may include coffee, cheeses, nuts, or other savory items regarded as a separate course elsewhere",
            "price": 100,
            "rating": 4,
            "image": "/uploads/thumbnail_dessert_4fdacb1066.png"
          }
        },
        {
          "node": {
            "id": "4",
            "title": "Lamb",
            "description": "Lamb, hogget, and mutton are the meat of domestic sheep (species Ovis aries) at different ages. A sheep in its first year is called a lamb, and its meat is also called lamb",
            "price": 250,
            "rating": 3,
            "image": "/uploads/thumbnail_lamb_8f452bb9a3.png"
          }
        },
        {
          "node": {
            "id": "3",
            "title": "Chicken wings",
            "description": "Chicken is a type of domesticated fowl, a subspecies of the red junglefowl. It is one of the most common and widespread domestic animals",
            "price": 400,
            "rating": 3,
            "image": "/uploads/thumbnail_chicken_c6742f8df3.png"
          }
        },
        {
          "node": {
            "id": "2",
            "title": "Homemade pasta",
            "description": "Pasta is a staple food of traditional Italian cuisine, with the first reference dating to 1154 in Sicily. Humans have been eating beef since prehistoric times",
            "price": 400,
            "rating": 5,
            "image": "/uploads/thumbnail_pasta_1e163eb9f7.png"
          }
        },
        {
          "node": {
            "id": "1",
            "title": "Grilled Beef",
            "description": "Beef is the culinary name for meat from cattle, particularly skeletal muscle. Humans have been eating beef since prehistoric times. Beef is a source of high-quality protein and essential nutrients. Check below for preparation instructions",
            "price": 300,
            "rating": 4,
            "image": "/uploads/thumbnail_beef_b95f539dc8.png"
          }
        }
      ]
    }
  }
}
```

At this point, if you save all the updates made to the `index.vue` file, we should get an updated view on the browser at `localhost:8080`:

![](https://paper-attachments.dropbox.com/s_FECB88B4FB35399B8F3DFD930A15661B7E106FD9EDAF4A36F0576E48146F5350_1603904618973_ezgif.com-gif-maker+1.gif)

At the moment, we've achieved our goal of rendering the products from our Strapi application on the Gridsome frontend app.

You might have noticed that when you click on any of the products, it opens a new route `http://localhost:8080/products/{id}` which represents the single page route for that particular product. This is possible because we wrapped each individual product card in a `<g-link>` tag which basically provides client-side routing capabilities to our Gridsome application:

```

<g-link
    :to="`/products/${edge.node.id}`"
    style="text-decoration: none; color: inherit"
> 
// product card here
</g-link>
```

Conclusion
----------

So quick recap. In this part, we've consumed the product endpoint we created with Strapi in the first part of this series. Gridsome's GraphQL data layer was instrumental in this process as we have demonstrated. It made it easy to access the data we need wherever we need. We also got our hands dirty with Vuetify, creating components and styling the product cards was equally just as fun. In [the next part](/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-4-6), we'll look at how we can display product details in a single product view page where customers can place orders.

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

Snipcart Strapi(2)

Learn how to create your own food ordering application and by extension any e-commerce app using modern development tools like Strapi, Gridsome & Snipcart. In this episode: Consuming products with Gridsome and GraphQL.

The Product section covers our releases, feature reviews and more. 

Product

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Announcing the first Strapi global user conference! It's a one day conference for the Strapi Community to learn, contribute, and collaborate on the future of the leading open source Headless CMS.

Blog Cover Strapi Conf (2)

Announcing StrapiConf - Our First Global User Conference

This is the recap of the online meetup hosted by Daniel and Chris Sevilleja from Digital Ocean showcasing how to build and deploy web apps to the Digital Ocean App Platform.

Online Meetup B(1)

Strapi Online Meetup #8 Recap

Learn how to create a food ordering app with Gridsome, Snipcart and your favorite headless CMS: Strapi. In this episode: Creating single product views with Gridsome templates.

Snipcart Strapi(3)

Building a Jamstack Food Ordering App with Strapi, Gridsome & Snipcart 4/6

Today, the Strapi team is very excited to announce [StrapiConf](https://www.strapi.io/strapi-conf-2021), a virtual conference that will take place on **April 22nd, 2021 from 9 am to 3 pm PST**, a time slot that we think is the most inclusive of all timezone and geographical locations. 

![gif](/uploads/gif_4260ca12cc.jpeg)

With this **free and virtual conference**, our intention is to bring together all the Strapi users, contributors, customers, and partners from all over the world for a day filled with Strapi learning, collaboration, and networking opportunities. 

From Strapi basics and Headless CMS best practices to insights into how to quickly build JAMStack websites, Mobile Applications, and modern digital experiences, StrapiConf will include content for everyone. Looking out a little further, we’ll share our vision for making Strapi a key enabler of the next revolution of low-code application development, taking advantage of APIs.

No matter your level of expertise with Strapi, Headless CMS in general, or your job title, attendees will get unique opportunities to learn and collaborate with their peers at other companies using Strapi to build modern, content-driven applications. 

The conference will include **2 tracks**, with  **30m talks** and  **10m lightning talks**. The first track will be geared towards **advanced users** and include **technical** Strapi concepts, customer/user stories, and integrations. The 2nd track will be for **Strapi beginners**, **Product and Content Managers**. 

The official schedule will be published in **January** but you can already [pre-register](https://www.strapi.io/strapi-conf-2021) and [submit proposals](https://docs.google.com/forms/d/e/1FAIpQLScUYkXm67c-yHccRYsskeUMWO4uwoWtFsBBElmVlrFYYfUyow/viewform) today! 

Please share the love on Twitter by following [@strapijs](https://twitter.com/strapijs) with the hashtag #StrapiConf and don’t hesitate to reach out to [conf@strapi.io](mailto:conf@strapi.io) if you have any questions. 


---

Get started with Strapi by creating a project, using a starter or trying our instant live demo. Also, consult our forum if you have any questions. We will be there to help you.
<p align="center">
<a href="https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project">
<img src="https://assets.strapi.io/uploads/Get_Started_e4e026ce55.svg#small" />
</a>
<a href="https://strapi.io/starters">
<img src="https://assets.strapi.io/uploads/Starters_9da222d819.svg#small" />
</a>
<a href="https://strapi.io/demo">
<img src="https://assets.strapi.io/uploads/Try_live_demo_af11161cd6.svg#small" />
</a>
</p>
<p align="center">
<a href="https://academy.strapi.io">
<img src="https://assets.strapi.io/uploads/Strapi_Academy_9ff315144a.svg#small" />
</a>
<a href="https://forum.strapi.io">
<img src="https://assets.strapi.io/uploads/Forum_3ab5cad74b.svg#small" />
</a>
</p>
See you soon!

Announcing the first Strapi global user conference! It's a one-day conference for the Strapi Community to learn, contribute, and collaborate on the future of the leading open-source Headless CMS.

Hello again 👋

I'm really enjoying sharing all the amazing webinars we've been hosting of late. Before we get into the last webinar we had, I want to share a playlist of all [previous Strapi Webinars](https://www.youtube.com/playlist?list=PL7Q0DQYATmvhlK_sjVYjcKuAJ4kLDEqKz), just in case you were looking. 

Back to it, here is a quick recap of our last webinar including the video recording, and some questions from the audience.

**By the numbers:**
153 registrants 👥
+80 attendees 🔊
+200 messages 💬
16 questions ❓

In this webinar, [**Chris Sevilleja**](https://twitter.com/chrisgetsbetter) - Developer Advocate at Digital Ocean helped [me](https://twitter.com/Malgamves) build a full-stack web application with Next & Strapi while deploying it to Digital Ocean's new app platform.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ho7nLkXmaKE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Audience Questions

**When using docker containers, is it fine to go for production directly running the Strapi Docker container (in prod mode, of course)?**
No, you will still need a dev env to build content models.

**What's the use case of the publicationState? Are draft records even returned from the Strapi graphql endpoint?**
Draft records on GraphQL aren't returned by default but there is a filter to do so. Find out more on this [documentation page](https://strapi.io/documentation/v3.x/content-api/parameters.html#publication-state).

Can't wait till the next one 😄




*This article is a guest series by the great [Ekene Eze](https://twitter.com/kenny_io). He’s leading the Developer Experience team at [Flutterwave](https://flutterwave.com/us/) and wrote this blog post through the [Write for the Community program](//write-for-the-community).*

This series will walk you through the processes of setting up your own food ordering application and by extension any e-commerce app using modern development tools like Strapi, Gridsome and Snipcart.

Table of Contents:
1. Part 1 - [Generating a Strapi app and creating products](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-1-6)
2. Part 2 - [Setting up a Gridsome project](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-2-6)
3. Part 3 - [Consuming products with Gridsome and GraphQL](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-3-6)
4. Part 4 - [Creating single product views with Gridsome templates](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-4-6)
5. Part 5 - [Implementing cart and checkout with Snipcart](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-5-6)
6. Part 6 - [Deploying the apps](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-6-6)


In the [last part](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-3-6), we successfully connected our Gridsome application to fetch products from our Strapi backend and display them for users. In this part, we will create single product views with Gridsome templates so that customers can open each product, view more details about it, and also have the opportunity to place orders.

Creating single product views with Gridsome templates
--------------

At the moment, we have a product listing page where we can view all products. But clicking on any of the products will lead to a 404 page as we can see below:


![](https://paper-attachments.dropbox.com/s_F94752BC0CD6740A2467CDECD90040D686858ABE6A87D63D125CB6E5D9BEC1EE_1603970428683_ezgif.com-gif-maker+2.gif)


Next, let's make it possible for users to view the product pages using Gridsome templates. Gridsome uses templates to create single pages for nodes in a collection. Let's see how that works. In the project's `src/templates` folder, create a new file called `Product.vue` and set it up like so:

```javascript


<template>
  <Layout>
    <template>
      <v-card elevation="0" class="mx-auto center mt-5 mb-3" max-width="900">
        <v-img
          class="white--text align-end"
          height="200px"
          width="300px"
          :src="`http://localhost:1337${this.$page.product.image}`"
        >
        </v-img>
        <v-card-title>{{ this.$page.product.title }}</v-card-title>
        <v-card-text class="text--primary">
          <div>{{ this.$page.product.description }}</div>
        </v-card-text>
        <v-card-subtitle class="pb-0">
          <h3>Instructions</h3>
          {{ this.$page.product.instructions }}
        </v-card-subtitle>
        <v-card-actions>
          <v-btn
            rounded
            outlined
            color="orange"
            text
          >
            Add to cart
          </v-btn>
          <v-spacer></v-spacer>
          <v-rating
            :value="this.$page.product.rating"
            color="amber"
            dense
            half-increments
            readonly
            size="14"
          ></v-rating>
          <span>
            <v-card-title>${{ this.$page.product.price }}</v-card-title>
          </span>
        </v-card-actions>
      </v-card>
    </template>
  </Layout>
</template>

<page-query>
query Products($id: ID!) {
  product(id: $id) {
    id
    title
    image
    description
    price,
    instructions,
    rating
  }
}
</page-query>

<script>
export default {};
</script>
```

In the snippet above, we created a new single view product template. In the template, we use Vuetify's UI components (card, buttons etc) to organize the view of the product's details. Finally, to ensure that we route the appropriate product to its equivalent details page, we write a `page query` that will return individual product details with respect to the ID we pass into it. 

To ensure that this behavior is achieved, we need to update the `gridsome.config.js` file in the project root directory:

```javascript
    // gridsome.config.js
    module.exports = {
      siteName: "Gridsome",
      plugins: [],
      templates: {
        Product: "/products/:id",
      },
    };
```  

This is how to set up Gridsome templates and routes. You can learn more about it and other possible configuration option [here](https://gridsome.org/docs/dynamic-routing). 

With this, we should be able to route to our individual product pages without hassle. Let's check back on the browser:


![](https://paper-attachments.dropbox.com/s_F94752BC0CD6740A2467CDECD90040D686858ABE6A87D63D125CB6E5D9BEC1EE_1603974799654_ezgif.com-gif-maker+3.gif)


Now that we have the template and single page routes setup, let's add the Shop and Support navigations on the header for completeness. 


Navigation
--------------

In Gridsome, every new file created in the `pages` directory maps to a new route automatically. This means that in order for us to show different pages for the `/shop` route and the `/support` route, all we need to do is create those pages and populate it with our contents of choice. In my case, I will display the same products we have in the homepage in the `/shop` page and display a contact form in the `/support` page. Create a new `pages/shop.vue` file and update it with the snippet below:

```javascript
    
    <template>
      <Layout>
        <Products />
      </Layout>
    </template>
    <page-query>
    query{
      products: allProduct{
        edges{
          node{
            id,
            title,
            description,
            rating,
            image,
            price
          }
        }
      }
    }
    </page-query>
    <script>
    import Products from "../components/Products";
    export default {
      components: {
        Products,
      },
    };
    </script>
```
    

Basically, what we are doing is rendering the `Products` component again in this page such that when users navigate to it, they still see a list of products to order. You can organize your app differently, but this should be enough for the scope of this series.

We'll do the same for the `/support` route, create a new `pages/support.vue` file. In this file, we are going to display a form where users can type in their questions and send to the site admins. Because I have this habit of implementing validations on my forms, I will use `vee-validate` to handle validations on the form. Install it with the command below:


`npm i vee-validate`

Next, open the `support.vue` file and update it with the snippet below:

```javascript
    
    <template>
      <Layout>
        <validation-observer ref="observer">
          <form class="center mb-4 mt-3">
            <h3>Contact us</h3>
            <validation-provider
              v-slot="{ errors }"
              name="Name"
              rules="required|max:10"
            >
              <v-text-field
                v-model="name"
                :counter="10"
                :error-messages="errors"
                label="Name"
                required
              ></v-text-field>
            </validation-provider>
            <validation-provider
              v-slot="{ errors }"
              name="email"
              rules="required|email"
            >
              <v-text-field
                v-model="email"
                :error-messages="errors"
                label="E-mail"
                required
              ></v-text-field>
            </validation-provider>
            <validation-provider v-slot="{ errors }" name="select" rules="required">
              <v-select
                v-model="select"
                :items="items"
                :error-messages="errors"
                label="Query type"
                data-vv-name="select"
                required
              ></v-select>
            </validation-provider>
            <v-textarea
              outlined
              name="input-7-4"
              label="What problem do you have"
              value="Tell us more about the problem"
            ></v-textarea>
            <v-textarea
              outlined
              name="input-7-4"
              label="What's your business like"
              value="Tell us more about your business"
            ></v-textarea>
            <v-btn class="mr-4" @click="submit"> Send </v-btn>
            <v-btn @click="clear"> Clear </v-btn>
          </form>
        </validation-observer>
        <div class="separator"></div>
      </Layout>
    </template>
    <script>
    import { required, email, max } from "vee-validate/dist/rules";
    import {
      extend,
      ValidationObserver,
      ValidationProvider,
      setInteractionMode,
    } from "vee-validate";
    setInteractionMode("eager");
    extend("required", {
      ...required,
      message: "{_field_} can not be empty",
    });
    extend("max", {
      ...max,
      message: "{_field_} may not be greater than {length} characters",
    });
    extend("email", {
      ...email,
      message: "Email must be valid",
    });
    export default {
      components: {
        ValidationProvider,
        ValidationObserver,
      },
      data: () => ({
        name: "",
        email: "",
        select: null,
        errors: null,
        items: ["Orders", "Delivery", "Tech support", "Refund"],
        checkbox: null,
      }),
      methods: {
        submit() {
          this.$refs.observer.validate();
        },
        clear() {
          this.name = "";
          this.email = "";
          this.select = null;
          this.checkbox = null;
          this.$refs.observer.reset();
        },
      },
    };
    </script>
    <style>
    
    </style>
```    

We have created a form with fields for the customer's name, email, and query type. We also added text area's for the user to provide more detailed information about their issues. Of course, these are all examples and should be replaced with whatever content you deem more appropriate for your use case. If you are new to `vee-validate`, it is a Vue.js based framework that makes it easy to validate form inputs and display errors. You can read more about it here.

At this point, if we test out the navigations on the browser, we should get all the new pages we created showing up in their respective routes. 

![](https://paper-attachments.dropbox.com/s_F94752BC0CD6740A2467CDECD90040D686858ABE6A87D63D125CB6E5D9BEC1EE_1603977450973_ezgif.com-gif-maker+4.gif)

Conclusion
--------------

In this part, we've been able to create single product views with Gridsome templates. We've also been able to set up the `/shop` and `/support` navigations with the corresponding pages showing on the browser. We also used `vee-validate` to handle form input validation on the support page. In [the next section](https://strapi.io/blog/building-a-jamstack-food-ordering-app-with-strapi-gridsome-and-snipcart-5-6), we are going to add cart and checkout functionalities to our Gridsome application so that users can indeed order meals from our restaurant. See you there!
https://mealzers.netlify.app

You might also be interested in...

Building a Jamstack Food Ordering App with Strapi, Gridsome & Snipcart 3/6

ekene

Ekene is a Developer Experience Engineer and Technical Writer. He is currently working with the Developer Experience team at Netlify where they build tools, create content, open-source repos, and demos to teach and also help developers build a better web with Netlify's products and services.
