colornativ / storefront-nuxt3-boilerplate

Nuxt 3 Storefront Boilerplate

Vue Storefront 3 Integration With plentysystems

Welcome to the plentysystems integration for Vue Storefront 3. For a technical overview of the repository structure, refer to the Guide. The rest of the README details how to configure your plentysystems system and get started with the project.

plentysystems system setup

To run this project, you need a plentysystems system. Get a free 30-day trial on our website or choose one of the available editions.

Plugins

💡 New systems ship with the required plugins pre-installed. If you use a new system, skip to the next step.

For plentyShop PWA to run, you have to install plugins that provide additional REST routes and providers. Carry out the following steps:

1. Log into your plentysystems system.
2. Install the following plugins in the latest version:
   • IO
   • plentyShop LTS
   • PayPal
   • Cash in advance
   • Pay upon pickup
   • DHL Shipping (Versenden)
   • Customer feedback
3. Set the priorities of the plugins, so that IO has the highest priority and plentyShop LTS the second highest. The priorities of all other plugins remains 0.

System configuration

1. Log into your plentysystems system.
2. Go to Setup » Guided Tours and complete Setting up plentyShop.
3. Optional: Go to Setup » Orders » Payment » PayPal and set up your PayPal account. If you skip this step, remove the PayPal component from the app.

Local dev setup

This section describes how to run the project locally.

Prerequisites

• Node.js 20+
• Yarn 3
• Personal Access Token with the scope read:packages

Download Node.js from the official website or use nvm to switch to a compatible version. For installation instructions for Yarn, refer to the Yarn documentation.

Repository fork

We recommend working with a fork of this repository. A fork allows you to easily incorporate updates from this boilerplate into your own codebase.

1. Create a fork.
2. Clone the forked repository.

Configuration

• Open middleware.config.ts and replace url with the URL of your plentysystems system.
• Open i18n.config.ts and nuxt.config.ts to update the locales. The locale settings have to match the plentysystems system settings. The fallbackLocale and defaultLocale have to match the system default language.
• Open nuxt.config.ts to manage your pwa.workbox settings. Workbox provides libraries and tools for Progressive Web App functionality.
• Open tailwind.config.ts to update your theme.
• Open cookie.config.ts to manage your consent cookies.

Authentication

This project queries data from plentysystems by using other NPM packages as middleware. These packages are published on the GitHub registry. To download packages from GitHub's registry, you have to authenticate. To enable authentication, carry out the following steps:

1. In the root directory, create a new file called .yarnrc.yml.
2. Copy the contents of .yarnrc.yml.example to .yarnrc.yml.
3. In yarnrc.yml, replace <TOKEN> with the Personal Access Token you created earlier.

Git doesn't track yarnrc.yml, so you don't have to worry about exposing your token.

Starting the app

1. Open the repository in your command line interface.
2. Run yarn to install all dependencies.
3. Run yarn dev to start the development server. The app will be served with hot reload at localhost:3000.

Deployment

This section describes how to deploy your app on your live domain.

plentysystems system

1. Log into your plentysystems system.
2. Go to CMS » Deployment.
3. Click on :plus: to add a new application.
4. Fill in the required information.
5. Create the application.

Copy the Access key to your clipboard. You'll need it in the next part.

GitHub

1. In your forked repository, create 2 encrypted secrets:

   • URL_ENDPOINT: TODO
   • URL_ENDPOINT_TOKEN: The Access key from the previous part.

2. In your forked repository, enable the GitHub Action Add zip file to S3 bucket from upload.yml. Update the trigger conditions to determine when to upload your repository to your plentysystems system.

Resources

Features

• Turborepo remote cache build system, with blazingly fast execution of commands (build, lint, test etc.) on your local machine.
• TypeScript support.
• Nuxt.js 3 & Server Side Rendering for great UX, loading and SEO scores.
• Beautiful components built with TailwindCSS and Storefront UI - a lightweight, accessible, and customizable component library built for e-commerce.
• Unit tests with Vitest and Vue Test Utils.
• ESLint for code linting.
• Prettier code formatter.
• Husky for working with Git hooks efficiently.
• Conventional Commits standard for commit messages.
• Staged code linting with lint-staged.
• Progressive Web App features with Vite PWA for Nuxt.
• i18n localisation powered by Nuxt-i18n.
• Vue Storefront SDK ready - integrate headless E-commerce platform with your project easily.
• Vue Storefront Middleware.
• Maximized lighthouse score.

Vue Storefront

• Introduction to learn what is Vue Storefront.
• Vue Storefront Documentation
• Vue Storefront UI Documentation
• Community Chat

License

Distributed under the MIT License. See LICENSE for more information.

Contributing

Please see our contributing.md for more information.

Support

If you have any questions about this integration we will be happy to answer them on the plentymarkets channel of the Vue Storefront Discord.