diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d7efe31dd..d6d6fc1f7 100755
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -93,18 +93,6 @@ module.exports = {
['/installation-setup/configure-integration', 'Configuring Vue Storefront'],
],
},
- {
- title: 'Getting started',
- collapsable: true,
- children: [
- ['/getting-started/introduction', 'Introduction'],
- ['/getting-started/project-structure', 'Project structure'],
- ['/getting-started/configuration', 'Configuration'],
- ['/getting-started/layouts-and-routing', 'Layouts and Routing'],
- ['/getting-started/theme', 'Theme'],
- ['/getting-started/internationalization', 'Internationalization'],
- ],
- },
{
title: 'Composition',
collapsable: true,
@@ -164,6 +152,18 @@ module.exports = {
['/improvements/analytics/', 'Analytics'],
],
},
+ {
+ title: 'Learn Vue Storefront',
+ collapsable: true,
+ children: [
+ ['https://docs.vuestorefront.io/v2/getting-started/introduction.html', 'What is Vue Storefront?'],
+ ['https://docs.vuestorefront.io/v2/getting-started/project-structure.html', 'Project structure'],
+ ['https://docs.vuestorefront.io/v2/getting-started/configuration.html', 'Configuration'],
+ ['https://docs.vuestorefront.io/v2/getting-started/layouts-and-routing.html', 'Layouts and Routing'],
+ ['https://docs.vuestorefront.io/v2/getting-started/theme.html', 'Theme'],
+ ['https://docs.vuestorefront.io/v2/getting-started/internationalization.html', 'Internationalization'],
+ ],
+ },
],
},
};
diff --git a/docs/getting-started/configuration.md b/docs/getting-started/configuration.md
deleted file mode 100644
index ca16eb327..000000000
--- a/docs/getting-started/configuration.md
+++ /dev/null
@@ -1,108 +0,0 @@
-# Configuration
-
-Whenever starting a new project or jumping into an existing one, you should look into the configuration files first. They control almost every aspect of the application, including installed integrations.
-
-## Mandatory configuration files
-
-Every Vue Storefront project must contain two configuration files described below. They control both client and server parts of the application.
-
-### `nuxt.config.js`
-
-**The `nuxt.config.js` file is the starting point of every project.** It contains general configuration, including routes, global middlewares, internationalization, or build information. This file also registers modules and plugins to add or extend framework features. Because almost every Vue Storefront integration has a module or plugin, you can identify which integrations are used by looking at this file.
-
-You can learn more about this file and available configuration options on the [Nuxt configuration file](https://nuxtjs.org/docs/directory-structure/nuxt-config/) page.
-
-### `middleware.config.js`
-
-The `middleware.config.js` file is as essential as `nuxt.config.js`, but much simpler and likely smaller. It configures the Server Middleware used for communication with e-commerce platforms and contains sensitive credentials, custom endpoints, queries, etc.
-
-### `.env`
-
-The `.env` file contains environmental variables used in both `nuxt.config.js` and `middleware.config.js` files for configuration that differs per environment. New projects come with a `.env.example` that you can rename (or clone) to the `.env` file and configure.
-
-## Optional configuration files
-
-Your project might include some additional configuration files not described above. Let's walk through the most common ones.
-
-- [`tsconfig.json`](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) configures compiler used to strongly type the project using TypeScript language. It defines a list of files and directories to be included and excluded from analysis and compiling.
-
-- [`babel.config.js`](https://babeljs.io/docs/en/config-files) configures Babel compiler used to make the code backward compatible with older browsers and environments.
-
-- [`ecosystem.config.js`](https://pm2.keymetrics.io/docs/usage/application-declaration/) configures PM2 Process Management that runs and manages Node application.
-
-- [`jest.config.js`](https://jestjs.io/docs/configuration) configures Jest testing framework, used for writing and running unit tests.
-
-## Magento Configuration
-
-In some cases Magento doesn't provide configuration values by GraphQL API. Then we recommend to set up a configuration
-fields and values in the `middleware.config.js` file. Example:
-
-```javascript
-customer: {
- customer_create_account_confirm: true
-}
-```
-
-### How to set a config flag in the middleware.config.js
-When you want to set a new flag, you need to:
-1. declare field in the `integrations.magento` object:
-```javascript
-module.exports = {
- integrations: {
- magento: {
- // (...) other fields
- foo: { // your new area of config
- your_new_config_value: true // your new flag
- }
- }
- }
-}
-```
-2. Get a new field in the `nuxt.config.js` file from the middleware config:
-```javascript
-import middleware from './middleware.config';
-
-const {
- integrations: {
- magento: {
- configuration: {
- cookies,
- externalCheckout,
- // (...) other fields
- foo // your new object
- },
- },
- },
-} = middleware;
-```
-3. Pass the new field to the `'~/modules/magento'` module configuration:
-```javascript
-['~/modules/magento', {
- cookies,
- externalCheckout,
- // (...) other fields
- foo // your new object
-}],
-```
-4. Now you can get the value of your config object in a composable/compoonent like this:
-```javascript
-import { useContext } from '@nuxtjs/composition-api';
-// (...)
-const { app } = useContext();
-const { foo } = app.context.$vsf.$magento.config; // here you go
-```
-
-#### Predefined Magento config fields
-##### Customer
-`customer_create_account_confirm` - it correspond to the Magento **Require Emails Confirmation** config flag:
-
-**Magento config:** `Stores -> Configuration -> Customers -> Customers configuration -> Require Emails Confirmation`
-**Possible values:** `boolean`
-
-**Consequences:**
-- when is set to true, then email confirmation is required after customer registration.
-- when is set to false, user can register and then is immediately logged-in as a customer.
-
-## What's next
-
-As the next step, we will learn about [Layouts and Routing](./layouts-and-routing.html) and show what routes come predefined in every Vue Storefront project and how to register custom ones.
diff --git a/docs/getting-started/internationalization.md b/docs/getting-started/internationalization.md
deleted file mode 100644
index 97a6638d5..000000000
--- a/docs/getting-started/internationalization.md
+++ /dev/null
@@ -1,158 +0,0 @@
-# Internationalization
-
-If you're building a shop for an international brand, you likely want it translated to different languages and using different currencies. In this document, you will learn how we're approaching internationalization in Vue Storefront and how to configure your application to use it.
-
-::: warning i18n is not multi-tenancy!
-This document only explains how to make a single shop instance available for multiple countries. If you need to build a system for multiple tenants, we suggest creating an instance of Vue Storefront for each tenant and sharing common resources through an NPM package.
-:::
-
-## How it works by default?
-
-By default, we are using the [`nuxt-i18n`](https://i18n.nuxtjs.org/) module for handling both translations and currencies. It's preinstalled in the [default theme](/getting-started/theme.html#what-s-makes-a-default-theme) and is configured for English and German translations out of the box.
-
-The `nuxt-i18n` module adds the `$t('key')` and `$n(number)` helpers to translate strings and format the currencies.
-
-You can find the translation keys in the `lang` directory of your project and configuration for currencies in `nuxt.config.js`.
-
-::: tip
-Even though the module is included in the default theme, it's not required. You can [disable it](#configuring-modules-separately) and handle internationalization yourself.
-:::
-
-To provide a unified way to configure internationalization across the application for different modules and integrations, we have introduced the `i18n` field in each module's configuration. It has the same format as the `nuxt-i18n` options. You can add any configuration there, and it will be propagated to all other Vue Storefront modules.
-
-All Vue Storefront integrations have the `useNuxtI18nConfig` property set to `true`. It means that they will use the same configuration as you provided for `nuxt-i18n` in the `i18n` field of your `nuxt.config.js`.
-
-```js
-// nuxt.config.js
-
-export default {
- buildModules: [
- [
- '@vue-storefront/{INTEGRATION}/nuxt',
- {
- // other comfiguration options
- i18n: {
- useNuxtI18nConfig: true,
- },
- },
- ],
- ],
- i18n: {
- locales: [
- {
- code: 'en',
- label: 'English',
- file: 'en.js',
- iso: 'en',
- },
- {
- code: 'de',
- label: 'German',
- file: 'de.js',
- iso: 'de',
- },
- ],
- defaultLocale: 'en',
- },
-};
-```
-
-## Configuring modules separately
-
-You can provide your own i18n configuration for a specific module by setting `useNuxtI18nConfig` to `false`.
-
-```js
-// nuxt.config.js
-
-export default {
- [
- '@vue-storefront/{INTEGRATION}/nuxt',
- {
- i18n: {
- useNuxtI18nConfig: false,
- locales: [
- {
- code: 'en',
- label: 'English',
- file: 'en.js',
- iso: 'en',
- },
- {
- code: 'de',
- label: 'German',
- file: 'de.js',
- iso: 'de',
- },
- ],
- defaultLocale: 'en'
- }
- }
- ];
-}
-```
-
-## CDN and cookies
-
-The server's response cannot contain the `Set-Cookie` header to make CDNs cache the website correctly.
-
-To achieve that, we've made our own mechanism for handling cookies responsible for storing `locale`, `currency`, and `country`. This mechanism also handles language detection and redirecting to the proper locale. For this reason, `@nuxtjs/i18n` language detection is disabled by default.
-
-```js
-// nuxt.config.js
-export default {
- i18n: {
- detectBrowserLanguage: false,
- },
-};
-```
-
-If you don't want to redirect users, you can disable this mechanism, as described in the section below.
-
-## Disabling the auto-redirect mechanism
-
-The `@vue-storefront/nuxt` module includes an auto-redirect mechanism that performs a server-side redirect to different URLs based on the target locale.
-
-You can disable this by setting `autoRedirectByLocale` to `false` in the `i18n` configuration object.
-
-```js
-// nuxt.config.js
-
-export default {
- i18n: {
- autoRedirectByLocale: false,
- },
-};
-```
-
-## Currency detection
-
-In addition to language detection, we also set currency based on locale. You can configure it in `nuxt.config.js` with the `vueI18n.numberFormats` property.
-
-For more configuration options of `numberFormats` entries, check the [Intl.NumberFormat()](https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/intl/numberformat) documentation.
-
-```js
-// nuxt.config.js
-
-export default {
- i18n: {
- vueI18n: {
- numberFormats: {
- en: {
- currency: {
- style: 'currency',
- currency: 'USD',
- currencyDisplay: 'symbol',
- },
- },
- // ...other locales
- },
- },
- },
-};
-```
-
-**Please note that only one currency can be set for each locale.**
-
-If this is a limitation for you, or if you don't want to have currencies tied to locales, you can disable this mechanism and provide your own.
-
-To disable it, set `autoChangeCookie.currency` to `false` as described in the section below.
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
deleted file mode 100644
index bad4cc914..000000000
--- a/docs/getting-started/introduction.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Introduction to Vue Storefront
-
-Without a proper understanding of the framework you're using, you might spend weeks or even months doing something that someone else has already done. That's why before we can dive deep into the project itself, we need to understand what powers it all under the hood.
-
-
-
-## It's all Nuxt.js
-
-We didn't want to reinvent the wheel and introduce yet another framework that solves the same issues as its predecessors, which took them years to mature. That's why...
-
-> Vue Storefront is essentially a [Nuxt.js](https://nuxtjs.org/) project with some plugins and modules preinstalled, as well as a ready-to-use e-commerce theme. Nuxt.js handles most of the front-end work and [Server Side Rendering](https://nuxtjs.org/docs/concepts/server-side-rendering/), while Vue Storefront adds the e-commerce specific bits and integrations to various platforms.
-
-Some of the plugins and modules that come with the fresh installation were created by the Nuxt.js community, and others come from our core team specifically for Vue Storefront projects.
-
-The default theme mainly consists of components from the [Storefront UI](http://storefrontui.io/) — an e-commerce focused UI library maintained by the Vue Storefront team.
-
-We described plugins, modules, and the theme in more detail on the following pages.
-
-### But why?
-
-You might be wondering why we choose Nuxt.js as our foundation. After all, it wasn't created with e-commerce in mind.
-
-When you start using any new framework, you expect it to:
-
-- have **plugins that solve common issues**, such as analytics, SEO, internationalization, etc.,
-- be **versatile and flexible** enough to allow extending it and creating custom integrations,
-- have **active and diverse community**, which answers questions, writes articles, and promotes the framework.
-
-Creating such an ecosystem from scratch takes years. But because we based Vue Storefront on Nuxt.js — the biggest Vue.js framework — it ticks all the boxes. Nuxt.js has a vast library of [ready-to-use modules](https://modules.nuxtjs.org/) and an active community of thousands of developers on the [Nuxt.js Discord server](https://discord.com/invite/ps2h6QT). It's also flexible enough to make it e-commerce ready with just a few plugins and modules.
-
-> Combining general-purpose modules from Nuxt.js and e-commerce specific modules from Vue Storefront significantly shortens the time-to-market. It allows you to focus on what's specific to your project.
-
-## Start with Vue.js
-
-If you are new to the Vue.js ecosystem, the best place to start learning is the [Vue.js 2 documentation](https://v2.vuejs.org/). **In our documentation, we assume prior knowledge of Vue.js (with some exceptions)**. While we do our best to explain each topic in detail, a lack of this knowledge might cause you to get lost.
-
-We also encourage reading [Nuxt.js 2 documentation](https://nuxtjs.org/docs/). In most places, we don't assume this knowledge and add links to related documents, but having it will make you more confident and let you work faster and more efficiently.
-
-## What's next
-
-Now that you understand what Vue Storefront is, go to the [Installation](./installation.html) guide to set up a project.
diff --git a/docs/getting-started/layouts-and-routing.md b/docs/getting-started/layouts-and-routing.md
deleted file mode 100644
index a4515ba4e..000000000
--- a/docs/getting-started/layouts-and-routing.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# Layouts and Routing
-
-Layouts and Routing in Vue Storefront are entirely powered by Nuxt.js. We will only give a brief overview of these features on this page, but you can learn more on the [Views](https://nuxtjs.org/docs/concepts/views/) page in the Nuxt.js documentation.
-
-## View hierarchy
-
-Every page consists of layers — some layers are shared between many routes, others are used in one specific route. We described each layer in detail in the sections below.
-
-### HTML document
-
-At the root of the hierarchy is the HTML document. By default, the framework provides one, but you can customize it by creating an `app.html` file in the root directory of your project. It has special tags used to insert parts of the documents, and by default, looks like this:
-
-```html
-
-
-
- {{ HEAD }}
-
-
- {{ APP }}
-
-
-```
-
-### Layouts
-
-Nuxt.js automatically registers all `.vue` files inside of the `layouts` directory as layouts. Unless configured otherwise, pages use the `default.vue` component as their layout. Open the `layouts/default.vue` component to get the general idea of how the page looks like, what components it imports and what data it loads within the `setup` function.
-
-Layout components include a special `` component that displays the page's content based on the current URL. Those pages are Vue.js components, too, explained in the next section.
-
-There is also an `error.vue` layout — used when an error occurs. It doesn't use the `` component but receives the `error` prop, which you can use to get an error code or message.
-
-The convention is to use `lowercase` when naming components inside of the `layouts` directory, e.g., `blog.vue`.
-
-### Pages
-
-Nuxt.js automatically registers all `.vue` files inside the `pages` directory as application routes. For example, creating an `AboutUs.vue` component will create an `/aboutus` route. In the same way, creating this component inside a nested directory called `company` will create the `/company/aboutus` route. It's all thanks to the [File System Routing](https://nuxtjs.org/docs/2.x/features/file-system-routing/) feature available in Nuxt.js. In the sections below, we describe how to modify routes manually.
-
-Pages can define a custom [layout](https://nuxtjs.org/docs/directory-structure/pages#layout) property to change the default used for this view.
-
-The convention is to use `PascalCase` when naming components inside of the `pages` directory, e.g., `MyAccount.vue`.
-
-## Manually adding and modifying routes
-
-If you want to manually add your custom routes or modify some already provided, use the `extendRoutes` function in the `nuxt.config.js`. This function has two properties:
-
-* `routes` — an array of already registered routes. You can `push` or delete entries from it.
-* `resolve` — helper function for resolving Vue.js components based on their paths in the project.
-
-For the sake of example, let's assume that we created a `pages/AboutUs.vue` component, but we want to use the `/company/about-us` route instead of auto-registered `/aboutus`. There are two approaches we could take.
-
-The first approach is to **delete existing route** and **register new route** with a different path.
-
-```javascript
-// nuxt.config.js
-
-export default {
- router: {
- extendRoutes(routes, resolve) {
- // Delete automatically registered route
- routes.splice(
- routes.findIndex(route => route.path === '/AboutUs'),
- 1
- );
-
- // Re-register the same component but with different path
- routes.push({
- name: 'AboutUs',
- path: '/company/about-us',
- component: resolve(__dirname, 'pages/AboutUs.vue')
- });
- }
- }
-};
-```
-
-Alternatively, we can **modify the `path` property of the existing entry** like so:
-
-```javascript
-// nuxt.config.js
-
-export default {
- router: {
- extendRoutes(routes, resolve) {
- // Find route index
- const index = routes.findIndex(route => route.path === '/AboutUs');
-
- // Modify route path
- routes[index].path = '/company/about-us';
- }
- }
-};
-```
-
-## Changing base path
-
-There are cases when your store is served under a specific path, eg. `example.com/shop/`. To make Vue.js router aware of this, you need to update the configuration in the `nuxt.config.js`:
-
-```javascript
-// nuxt.config.js
-
-export default {
- router: {
- base: "/shop/"
- }
-};
-```
-
-Unfortunately not all links in your application will detect this. You can fix it, by wrap all relative links and paths to assets in `addBasePath` helper.
-
-```vue
-
-
-
-
-
-
-```
-
-## Navigating between pages
-
-To navigate between pages within your application, use the [NuxtLink](https://nuxtjs.org/docs/features/nuxt-components/#the-nuxtlink-component) component, instead of the traditional `` tag. While you can use the `` tag for external links, using the `` for internal links will ensure that you make use of the Single-Page Navigation capabilities that Nuxt.js provides.
-
-Single-Page Navigation (SPA) provides many benefits, such as:
-
-* much faster and more responsive navigation compared to the traditional server navigation,
-* framework is initialized only once,
-* components shared between the pages are rendered only once (if they use the same layout),
-* fewer requests and data sent over the network.
-
-## What's next
-
-Layouts and pages are one thing, but in the end, they must display components and styles. Otherwise, we would only serve blank pages.
-
-New projects come with a default [Theme](./theme.html), so the next step is to understand what makes it look like this.
diff --git a/docs/getting-started/project-structure.md b/docs/getting-started/project-structure.md
deleted file mode 100644
index c9a109ca4..000000000
--- a/docs/getting-started/project-structure.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Project structure
-
-If you followed our [Installation](/installation-setup/installation.html) guide, you should have a Vue Storefront project with some Magento already integrated. This project has a bunch of directories, Vue components, and files, but what does what?
-
-In this section, you will learn how to navigate the Vue Storefront project and where to start developing.
-
-## Structure basics
-
-As described on the [Introduction to Vue Storefront](./introduction.html) page, Vue Storefront is just a Nuxt.js project under the hood. For this reason, our project structure inherits from Nuxt.js but has some additional files.
-
-To learn about it in-depth, you can refer to the [Directory Structure in Nuxt.js project](https://nuxtjs.org/docs/get-started/directory-structure/) document, but the gist of it is:
-
-* [**.nuxt**](https://nuxtjs.org/docs/2.x/directory-structure/nuxt) is a dynamically generated build directory. You should **not** manually modify it, nor synchronize it using version control like GIT.
-
-* [**assets**](https://nuxtjs.org/docs/2.x/directory-structure/assets) contains uncompiled assets such as your styles, images, or fonts.
-
-* [**components**](https://nuxtjs.org/docs/2.x/directory-structure/components) contains Vue.js components used on different pages or parts of your application. You can import these components from pages, layouts, and other components.
-
-* **composables** provides business logic that can be used in any place in the app.
-
-* **getters** are functions that help to get commonly used data.
-
-* **helpers** are utility functions that help resolve some common tasks like for example format currency
-
-* [**lang**](https://docs.vuestorefront.io/v2/getting-started/internationalization.html) contains translations for your application. Available locales are configured in the `nuxt.config.js` file.
-
-* [**layouts**](https://nuxtjs.org/docs/2.x/directory-structure/layouts) contains Vue.js components that act as a UI base for the whole application or specific pages.
-
-* [**middleware**](https://nuxtjs.org/docs/2.x/directory-structure/middleware) contains JavaScript files that contain custom functions run before rendering a whole application or just a specific layout or page. These can be used, for example, to protect pages from unauthorized access or redirect if some conditions are not met.
-
-* **modules** contains code related to specific area of the app like customer, checkout and so on. Each module can have components, helpers, composables and other files and services
-
-* [**pages**](https://nuxtjs.org/docs/2.x/directory-structure/pages) contains Vue.js components that Nuxt.js automatically registers as routes.
-
-* [**static**](https://nuxtjs.org/docs/2.x/directory-structure/static) contains files that likely won't change, such as favicon, `robots.txt`, sitemap, or company logos.
-
-* **test-utils** contains utilities and helpers for unit testing.
-
-* **types** provides global TypeScript types
-
-* **middleware.config.js** and **nuxt.config.js** configurations file are described in detail in the [Configuration](./configuration.html) document.
-
-## What's next
-
-With a basic understanding of the project structure, it's time to learn about the [Configuration](./configuration.html) files that control the application and installed integrations. They are a crucial part of every Vue Storefront application.
diff --git a/docs/getting-started/theme.md b/docs/getting-started/theme.md
deleted file mode 100644
index bb108c12f..000000000
--- a/docs/getting-started/theme.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# Theme
-
-A project without any theme would just show a blank page, but if you have seen any of Vue Storefront demos or created a project using our CLI, you know that's not the case. So what makes it look like it does?
-
-This page will describe what makes the default theme, how to customize it, and what tricks we use to improve the performance.
-
-## What's makes a default theme
-
-### Preinstalled modules and libraries
-
-Every new Vue Storefront project comes with a set of preinstalled Nuxt.js modules and plugins, as well as Vue.js libraries. These packages offer a variety of features from cookie handling to form validation and are used by the base theme. You can remove some of them, but only if you decide to create a custom theme from scratch.
-
-#### Nuxt.js modules and plugins
-
-- [`@nuxt/typescript-build`](https://typescript.nuxtjs.org/) - for TypeScript support,
-
-- [`@nuxtjs/pwa`](https://pwa.nuxtjs.org/) - for PWA functionalities,
-
-- [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) - for Composition API support,
-
-- [`@nuxtjs/style-resources`](https://www.npmjs.com/package/@nuxtjs/style-resources) - for importing SASS variables globally,
-
-- [`nuxt-i18n`](https://i18n-legacy.nuxtjs.org/) - for internationalization (translations and price formatting),
-
-- [`nuxt-purgecss`](https://purgecss.com/guides/nuxt.html) - for removing unused CSS from the final build,
-
-- [`cookie-universal-nuxt`](https://www.npmjs.com/package/cookie-universal-nuxt) - for handling cookies on the server (SSR) and client (browser).
-
-#### Vue.js libraries
-
-- [`vee-validate`](https://vee-validate.logaretm.com/v3) - for frontend form validation,
-
-- [`vue-scrollto/nuxt`](https://www.npmjs.com/package/vue-scrollto) - for smooth scrolling to HTML elements,
-
-- [`vue-lazy-hydration`](https://www.npmjs.com/package/vue-lazy-hydration) - for delaying hydration and improving performance.
-
-### Storefront UI
-
-
- 
- (Click to zoom)
-
-
-Almost every page in our default theme uses components whose names start with `Sf`. These come from the [Storefront UI](http://storefrontui.io/) — a design system and library of Vue.js components dedicated to e-commerce, maintained by the Vue Storefront team. Every component can be heavily customized using [props](https://v2.vuejs.org/v2/guide/components-props.html) and [slots](https://v2.vuejs.org/v2/guide/components-slots.html).
-
-Please check [Storefront UI documentation](https://docs.storefrontui.io/) to learn more and interactively customize and test the components.
-
-::: tip Want to use another UI library? No problem!
-If you don't want to use Storefront UI, feel free to remove it from your project. It's just a UI layer, and the project can work with any other UI library or a custom code.
-:::
-
-## How to customize the theme
-
-Every default theme will need customization at some point. Regardless of how complex the changes are, we recommend reusing as much from the default theme as possible. This will not only save you time but will likely reduce the number of bugs, thanks to the time we spend on stabilization and testing.
-
-### Updating layouts, pages, and components
-
-To update the existing component, you need to identify it first, and Vue.js Devtools is invaluable in this. Open the Vue.js Devtools, right-click the DOM element you want to update, and select `Inspect Vue component`. One of the components in the tree in Vue.js Devtools should get highlighted. You can look for the component with the same name in the `layout`, `pages`, or `components` directories and update it to your needs. However, there are a few exceptions to this rule described below.
-
-#### `Sf` components
-
-If the component's name starts with `Sf`, it means that it comes from [StorefrontUI](https://storefrontui.io/) library. The look and behavior of such components are controlled using props and slots passed from the direct **parent** component.
-
-#### `LazyHydrate` and `Anonymous Component` components
-
-These two components come from the [vue-lazy-hydration](https://github.com/maoberlehner/vue-lazy-hydration) library and are wrappers around other components. They are used to improve the performance by deferring the hydration process (making components interactive) and don't affect the look of other components. The behavior of such components is controlled using props passed from the direct **parent** component.
-
-### Updating styles
-
-There are a few ways of updating the default styles. Below we describe the most optimal methods for the most common cases.
-
-#### Adding global styleheet
-
-To add global styles applied to all pages, use the [css property](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-css/) in `nuxt.config.js`.
-
-#### Adding stylesheet to specific layout, page, or component
-
-To add a stylesheet to a specific component, use `@import` regardless of whether you are using CSS, SCSS, or LESS.
-
-```vue
-
-```
-
-#### Using variables, mixins, and function in components
-
-Usually, to access style variables, mixins, and functions, we import them in every component separately. Thanks to the [@nuxtjs/style-resources](https://github.com/nuxt-community/style-resources-module#readme) module, we can register them in `nuxt.config.js` and access them without extra `@import` statements.
-
-:::danger Be careful
-Stylesheets in `styleResources` should **only** contain variables, mixins, and functions. During the build process, the components import these stylesheets. Any **styles** declared in them are added to every component, significantly impacting the performance and application size.
-:::
-
-We use this approach to have access to StorefrontUI helpers in all components:
-
-```javascript
-// nuxt.config.js
-
-export default {
- styleResources: {
- scss: [
- require.resolve('@storefront-ui/shared/styles/_helpers.scss', { paths: [process.cwd()] })
- ]
- },
-};
-```
diff --git a/docs/guide/graphql-get.md b/docs/guide/graphql-get.md
index 88cb721f8..7d93a5994 100644
--- a/docs/guide/graphql-get.md
+++ b/docs/guide/graphql-get.md
@@ -1,12 +1,13 @@
# Use GET for GraphQL Queries
-In Magento we can leverage the power of GET requests caching, to improve the performance of your GrpahQL API. In order to do this, you need to setup your Magento backend and configure the Vue Storefront Magento integration.
+In Magento we can leverage the power of GET requests caching, to improve the performance of your GrpahQL API. In order to do this, you need to setup your Magento backend and configure the Vue Storefront Magento integration.
## Enabling GraphQL Caching on Magento with Varnish
To enable the GraphQL caching on Magento, first you need to have installed the Varnish and have it configured into your environment.
1. Edit the `default.vcl` file on your system, and update the `vcl_hash` subroutine, to check whether the request URL contains `graphql`, as follows:
+
```
sub vcl_hash {
if (req.http.cookie ~ "X-Magento-Vary=") {
@@ -30,7 +31,9 @@ sub vcl_hash {
}
}
```
+
2. Then you need to add the `process_graphql_headers` subroutine to the `default.vcl` file:
+
```
sub process_graphql_headers {
if (req.http.Store) {
@@ -41,9 +44,10 @@ sub process_graphql_headers {
}
}
```
+
> Query results should not be cached for logged in customers, because it cannot be guaranteed that these results are applicable to all customers. For example, you can create multiple customer groups and set up different product prices for each group. Caching results like these might cause customers to see the prices of another customer group.
-You can find more information about this topic at [https://devdocs.magento.com/guides/v2.4/graphql/caching.html#caching-with-varnish]
+You can find more information about this topic [on the Magento docs](https://devdocs.magento.com/guides/v2.4/graphql/caching.html#caching-with-varnish)
3. Open the `middleware.config.js` file, it should be located on the root folder of your store, there you will change the flag `useGETForQueries` to `true` to enable the usage of GET request for queries
diff --git a/docs/guide/override-queries.md b/docs/guide/override-queries.md
index e04ecfe1a..bf4f21b00 100644
--- a/docs/guide/override-queries.md
+++ b/docs/guide/override-queries.md
@@ -16,44 +16,43 @@ In order to query `cld_data`, you need to have [Cloudinary Magento extension](ht
---
-1. Inside the theme's root let's create a `customQueries` directory, and [copy the content of the default `productsList` query from `vuestorefront/magento2/packages/api-client/src/api/products/productsList.ts` file](https://github.com/vuestorefront/magento2/blob/main/packages/api-client/src/api/products/productsList.ts) into the newly created directory.
+1. Inside the theme's root let's create a `customQueries` directory, and copy the content of the default `productsList` query from the `/productsList.ts` file ([Source](https://github.com/vuestorefront/magento2/blob/main/packages/api-client/src/api/products/productsList.ts)) into the newly created directory.
You can modify the query inside this file by adding `cld_data` with fields to the existing query as below:
- ```typescript
- import gql from 'graphql-tag';
+```typescript
+import gql from 'graphql-tag';
- export default gql`
- query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
- products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
- aggregations {
- attribute_code
+export default gql`
+ query productsList($search: String = "", $filter: ProductAttributeFilterInput, $pageSize: Int = 10, $currentPage: Int = 1, $sort: ProductAttributeSortInput) {
+ products(search: $search, filter: $filter, pageSize: $pageSize, currentPage: $currentPage, sort: $sort) {
+ aggregations {
+ attribute_code
+ label
+ options {
label
- options {
- label
- value
- count
- }
+ value
+ count
}
- items {
- //...
- cld_data {
- image
- thumbnail
- }
- //...
- }
- page_info {
- current_page
- page_size
- total_pages
+ }
+ items {
+ //...
+ cld_data {
+ image
+ thumbnail
}
- total_count
+ //...
+ }
+ page_info {
+ current_page
+ page_size
+ total_pages
}
+ total_count
}
- `;
-
- ```
+ }
+`;
+```
::: warning
Make sure you have `graphgl-tag` installed as dependency prior using this sample code.
@@ -61,37 +60,37 @@ Make sure you have `graphgl-tag` installed as dependency prior using this sample
2. In `middleware.config.js`, import the modified query
- ```js
- import customProductsQuery from './customQueries/productList';
- ```
+```js
+import customProductsQuery from './customQueries/productList';
+```
3. Add a new property field `customQueries` under `integrations.magento` with the following code:
- ```js
- module.exports = {
- integrations: {
- magento: {
- customQueries: {
- /* This is where we override the default query */
- products: (context) => ({
- ...context,
- query: customProductsQuery, // Your custom query
- })
- },
- //...
- },
+```js
+module.exports = {
+ integrations: {
+ magento: {
+ customQueries: {
+ /* This is where we override the default query */
+ products: (context) => ({
+ ...context,
+ query: customProductsQuery, // Your custom query
+ }),
},
- };
+ //...
+ },
+ },
+};
```
4. Now you can restart your dev environment and view the updated data queried.
::: warning
-`thumbnail` is a must-have field to query. It is used for our default image rendering (for Nuxt image). DO NOT remove it from the query in any circumstance.
+`thumbnail` is a must-have field to query. It is used for our default image rendering via Nuxt Image. Do not remove it from the query in any circumstance.
:::
### Important notes
-**Only** attributes presented on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side.
+Only attributes presented on `ProductInterface` are accessible via GraphQL without any additional modification on the Magento side.
-To be able to get any custom attributes you must extend GraphQL schema in the Magento2. Follow [Magento 2 documentation](https://devdocs.magento.com/guides/v2.4/graphql/develop/extend-existing-schema.html) to achieve that.
+To be able to get any custom attributes, you must extend the GraphQL schema in Magento 2. Follow [Magento 2 documentation](https://devdocs.magento.com/guides/v2.4/graphql/develop/extend-existing-schema.html) to achieve that.
diff --git a/docs/guide/ssr.md b/docs/guide/ssr.md
index 069d7d4ca..641994091 100644
--- a/docs/guide/ssr.md
+++ b/docs/guide/ssr.md
@@ -6,20 +6,22 @@ VueStorefront 2 - Magento 2 integrations use @vue-storefront/cache module that a
rendered pages.
### What is cached
+
The cached pages are:
-* Home page with the `Vhome` tag.
-* All CMS pages with the `V${page.identifier}` tag
-* Category page with the `Vcategory` tag and tags for products: `P${product.uid}` as well as categories `C${category.slug}`
-* Product page with the `Vproduct-${route.value.params.id}` tag and tags for the main product `P${product.uid}` as well as categories `C${cat.id}`
+- Home page with the `Vhome` tag.
+- All CMS pages with the `V${page.identifier}` tag
+- Category page with the `Vcategory` tag and tags for products: `P${product.uid}` as well as categories `C${category.slug}`
+- Product page with the `Vproduct-${route.value.params.id}` tag and tags for the main product `P${product.uid}` as well as categories `C${cat.id}`
## Invalidating tags
To invalidate a tag and remove pages associated with that tag, use the [Invalidation endpoint](https://docs.vuestorefront.io/v2/performance/ssr-cache.html#invalidating-tags).
Go to the route configured in the `.env` file under the `VSF_REDIS_CACHE_INVALIDATE_KEY` key with two query parameters:
-* `key` — string matching the `VSF_REDIS_CACHE_INVALIDATE_KEY` key in the `.env` file.
-* `tags` — a comma-separated list of tags for invalidation.
+
+- `key` — string matching the `VSF_REDIS_CACHE_INVALIDATE_KEY` key in the `.env` file.
+- `tags` — a comma-separated list of tags for invalidation.
Assuming that you are running the application locally, the `VSF_REDIS_CACHE_INVALIDATE_URL` key is equal to `/cache-invalidate,` and the `VSF_REDIS_CACHE_INVALIDATE_KEY` key is equal to `secret_key`, and you want to invalidate the `Vhome` tag, the full URL will look like this:
@@ -33,16 +35,16 @@ You don't need to add any additional packages to cache more pages — just add o
## Cache drivers
-@vue-storefront/cache module is open source and provided Out Of The Box by Magento 2 integration.
+`@vue-storefront/cache` module is open source and provided Out Of The Box by Magento 2 integration.
To set up caching in your store, you must install and configure a cache driver.
You can use our enterprise `@vsf-enterprise/redis-cache` module, or build your cache driver.
### Redis cache (enterprise)
+
Once you have access to the [Vue Storefront npm registry](https://docs.vuestorefront.io/v2/general/enterprise.htm),
you can install the Redis cache driver by running this command in a console:
-``yarn add @vsf-enterprise/redis-cache``
-
+`yarn add @vsf-enterprise/redis-cache`
#### redis cache configuration
@@ -85,6 +87,6 @@ Then you have to update `nuxt.config.js file` and add this to the `modules` obje
## Useful links
-- https://docs.vuestorefront.io/v2/performance/ssr-cache.html
-- https://docs.vuestorefront.io/v2/integrations/redis-cache.html
-- https://docs.vuestorefront.io/v2/integrate/cache-driver.html
+- [Server Side Rendering Cache](https://docs.vuestorefront.io/v2/performance/ssr-cache.html)
+- [Redis cache](https://docs.vuestorefront.io/v2/integrations/redis-cache.html)
+- [Integrating cache driver](https://docs.vuestorefront.io/v2/integrate/cache-driver.html)
diff --git a/docs/index.md b/docs/index.md
index f93021fdb..383e13057 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,8 +1,3 @@
-
-
# Vue Storefront 2 for Magento
Welcome to the documentation of Vue Storefront 2 integration for Magento 2.
@@ -13,8 +8,8 @@ It's part of our ecosystem of integrations and extensions, which you can learn m
To get started, see the following guides:
-- [Introduction](/getting-started/introduction.html) to learn what is Vue Storefront,
-- [Installation](/installation-setup/installation.html) to install and setup new Vue Storefront project.
+- [Introduction](https://docs.vuestorefront.io/v2/getting-started/introduction.html) to learn what is Vue Storefront
+- [Installation](/installation-setup/installation.html) to install and setup new Vue Storefront project for Magento 2.
## Demo
diff --git a/docs/installation-setup/installation.md b/docs/installation-setup/installation.md
index ad4db862c..0cf98a437 100644
--- a/docs/installation-setup/installation.md
+++ b/docs/installation-setup/installation.md
@@ -1,5 +1,9 @@
# Installation
+If you prefer a video guide - here's a quick start guide to get your project up and running.
+
+
+
## Prerequisites
Before proceeding, make sure you have [Node 16](https://nodejs.org/en/) installed. You can check this by running the following command:
diff --git a/docs/package.json b/docs/package.json
index 9af3adf50..4f18a89e9 100755
--- a/docs/package.json
+++ b/docs/package.json
@@ -29,6 +29,6 @@
"dependencies": {
"sass-loader": "^8.0.2",
"vue-multiselect": "^2.1.6",
- "vuepress-theme-vsf-docs": "^1.0.14"
+ "vuepress-theme-vsf-docs": "^1.0.16"
}
}
diff --git a/docs/plugins/index.md b/docs/plugins/index.md
index 096145217..377b6e083 100644
--- a/docs/plugins/index.md
+++ b/docs/plugins/index.md
@@ -10,20 +10,6 @@ It checks if locale in i18n module is changes and update `vsf-store` and `vsf-lo
client and server side.
### Flow
-1. Start: load middleware
-2. Read current Magento Store Code from vsf-store cookie
-3. Is store code found?
- 2. No: Set default locale if isn't already set
- 1. End
-4. Yes: Check if current store code has corresponding locale in Nuxt.config.js
- 1. No: Set default locale if isn't already set
- 1. End
-5. Yes: If corresponded locale is different than current locale
- 1. No: End
-6. Yes: set new locale
-7. Go forward (load the page with correct locale and date)
-8. End
-
@@ -31,19 +17,22 @@ client and server side.
We expose `$fc` (format currency) function as a plugin to allow you to convert any number or string into a formatted currency string. Under the hood plugins uses Intl.NumberFormat class to handle formatting and therefore exposes the same options configuration.
Here are few examples of how you can use it in templates.
+
```javascript
-$fc(productGetters.getPrice(product).regular) // by default vsf-currency cookie is used to define target currency
-$fc(productGetters.getPrice(product).regular, { currency: 'USD' }) // you can easily override this behaviour by passing configuration object
+$fc(productGetters.getPrice(product).regular); // by default vsf-currency cookie is used to define target currency
+$fc(productGetters.getPrice(product).regular, { currency: 'USD' }); // you can easily override this behaviour by passing configuration object
```
Configuration object is an interface Intl.NumberFormatOptions, check it for all available options.
---
-***NOTE***
-Why we are not using built-in i18n package currency configuration and $n function to cover currency displaying? The answer is because we must be able to handle multiple currencies within one store but in i18n package, currency and locale are in 1:1 relation when in Magento one store can have multiple languages and currencies set. Currency and locale are necessarily disjointed which is not true for i18n plugin.
+**_NOTE_**
+
+Why we are not using built-in i18n package currency configuration and $n function to cover currency displaying?
+
+The answer is because we must be able to handle multiple currencies within one store but in i18n package, currency and locale are in 1:1 relation when in Magento one store can have multiple languages and currencies set. Currency and locale are necessarily disjointed which is not true for i18n plugin.
You can still use all i18n native functions to perform any formatting though.
---
-
diff --git a/docs/yarn.lock b/docs/yarn.lock
index d63d8ffdc..4acd9b14b 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -8336,10 +8336,10 @@ vuepress-plugin-smooth-scroll@^0.0.3:
dependencies:
smoothscroll-polyfill "^0.4.3"
-vuepress-theme-vsf-docs@^1.0.14:
- version "1.0.14"
- resolved "https://registry.yarnpkg.com/vuepress-theme-vsf-docs/-/vuepress-theme-vsf-docs-1.0.14.tgz#87e9a4fd079f34548140cad7647d4cf04a02dc59"
- integrity sha512-m57TPCuaA8iyEsk/Kvgg0Wi+ByLqPXgbPF7dwGSgqjGlcIjjW2bMoaFrI7yNNLxnKdfyYXhgR0rLsPVQTPmwgw==
+vuepress-theme-vsf-docs@^1.0.16:
+ version "1.0.16"
+ resolved "https://registry.yarnpkg.com/vuepress-theme-vsf-docs/-/vuepress-theme-vsf-docs-1.0.16.tgz#453225d147e1b3440ec05312f33b1877804cf3ad"
+ integrity sha512-qVb+TvW5y914S+SB9BhoX1ulo5xOw/2JS8pwqEWPoM8mAfdLwqglBgPUFb1HrRQhgY0I11rSI7couWl6ENh7mQ==
dependencies:
"@vuepress/plugin-active-header-links" "1.9.7"
"@vuepress/plugin-nprogress" "1.9.7"