Setting Up a Nuxt.js E-commerce Project with Perspect

This guide covers the essentials of creating a Nuxt.js project, preparing it for e-commerce functionality, and deploying it via Perspect.

I. Setting Up Your Nuxt.js Project

To create a new Nuxt.js project, run the following command in your terminal:

npx create-nuxt-app nuxtcommerce

II. Follow the Prompts to Select Your Preferences

For an e-commerce site, consider choosing:

Programming language: JavaScript
Package manager: Npm
UI framework: Tailwind CSS
Template engine: HTML
Rendering mode: Universal (SSR / SSG)
Deployment target: Static

III. Navigate to the Project Directory

After the project is created, navigate to its directory:

cd nuxtcommerce

IV. Integrate the E-commerce JSON

Add the following code within the <body> tag of the index.html file:

<script>
  window.perspect = {};
  perspect.spkl = "{{ stripe_pk_live }}";
  perspect.spkt = "{{ stripe_pk_test }}";
  perspect.said = '{{ stripe_account_id }}';
  perspect.site_env = 'test';
  window.product_categories = {{ product_categories_json | tojson | safe }};
  window.pages = {{ pages_posts | tojson | safe }};
</script>

V. Commit to GitHub

Initialize a Git repository and push your project to GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin <YOUR_GITHUB_REPO_URL>
git push -u origin master

VI. Create a Perspect Website and Map a GitHub Repo to It

After mapping a repo to a Perspect site, you can push changes to the GitHub repo, and the Nuxt.js app will automatically build and deploy.