Skncre + Nuxt

#Overview

Use our Skncre starter with Nuxt to create a composable cosmetics storefront starter.

#Quickstart: Clone the Skncre Nuxt starter

To get up and running quickly with Nuxt and Hygraph, clone our Skncre starter:

1. Clone the Hygraph project
2. Get the Nuxt code from Github

Install Skncre via terminal:

npx degit git@https://github.com/hygraph/skncre-starter-nuxt.git

Alternatively, you can clone Skncre from the Hygraph project directory from the selection of available starters.

#Connecting Hygraph to Nuxt

Change directory to your new Skncre project and install dependencies if needed using yarn install.

After initializing permissions, we'll create a .env file by renaming the .env.example file in the root of our Nuxt project.

Add the endpoint URL we copied from Hygraph inside the .env file, like this:

GQL_HOST=https://<HYGRAPH_CDN_LOCATION>.cdn.hygraph.com/content/<ID>/master

#Configure Hygraph assets to work with Nuxt

To work with Nuxt image module, we need to specify Hygraph as an image provider by adding the base URL in the nuxt.config.ts file.

Your config file should contain the following code:

// nuxt.config.ts
export default defineNuxtConfig({
... other configuration parameters here
  image: {
    providers: {
      hygraph: {
        baseurl: "https://media.graphassets.com"
      }
    }
  }
})

In this case, we are using Hygraph as our image source. You can add additional image providers as needed to the Nuxt config file.

Skncre

Once you add the GQL_HOST and configure the image source, you can spin up your development server with the command yarn run dev and your app will be available at https://localhost:3000.