The Nacelle Nuxt Starter

If you're looking to get moving quickly, our Nuxt (opens new window) Starter is an excellent choice.

The quick start guide will help you get started using the starter with Shopify as your eCommerce platform and Contentful for content.

What Is Nuxt?

Nuxt (opens new window) is a Vue.js (opens new window) framework for web sites and web apps. While these docs explain many aspects of the Nacelle Nuxt Starter, they also assume a working knowledge of Vue.js and Nuxt. If you are not already comfortable with creating Vue components and Nuxt projects, please stop here and refer to the following resources:

• Vue.js docs (opens new window)
• Nuxt docs (opens new window), with an emphasis on:
  • Static Site Generation (SSG) (opens new window)
  • the Nuxt Lifecycle (opens new window)
  • data fetching (opens new window)
  • filesystem routing (opens new window)

Features

The starter comes with the following core functionality.

• Routing - inside the nuxt.config.js you will find an example of how to generate your dynamic routes. By default this is set up to generate all of your product and collection routes.

• Product Page - navigate to /products/<some-product-handle> and you will see a minimal product page where users can select a variant, update quantity and add to cart.

• Collection Page - navigate to /collections/<some-collection-handle> and you will see a minimal collection page where users can view a list or products and add them to cart.

• Search Page - navigate to /search and you will see a minimal search page where users can search and filter the product catalog.

• Shopping Cart - from any of the pages above click add to cart and you will see a minimal shopping cart where users can adjust the items in their cart and proceed to checkout.

• Shopify Checkout - when clicking checkout from the shopping cart, users are routed to a Shopify hosted checkout. The functionality is provided by our @nacelle/shopify-checkout (opens new window) package.