|
1 | 1 | # Configuration |
2 | 2 |
|
3 | | -Usually, the first thing to do after setting up a fresh Vue Storefront project is configuring it. The bare minimum is to provide the API credentials for your integrations. |
4 | | - |
5 | | -Your Vue Storefront-related configuration is located in two places: |
6 | | - |
7 | | -- `nuxt.config.js` is a place where you're configuring properties related only to the frontend part of your application. |
8 | | -- `middleware.config.js` is a place where you're configuring your integration middleware. You will put there API keys, integration configurations, custom GraphQL queries, and new API endpoints. |
9 | | - |
10 | | -## Configuring Integrations |
11 | | - |
12 | | -Most of the integrations business logic is placed in the [Integration Middleware](/architecture/server-middleware.html). Therefore they're configurable through the `integrations` field in `middleware.config.js`. |
13 | | - |
14 | | -```js |
15 | | -// middleware.config.js |
16 | | -module.exports = { |
17 | | - integrations: { |
18 | | - // integration configs |
19 | | - } |
20 | | -}; |
21 | | -``` |
22 | | - |
23 | | -Sometimes integrations also expose a Nuxt module to configure frontend-related properties and [i18n](/getting-started/internationalization.html). |
24 | | - |
25 | | -```js |
26 | | -// nuxt.config.js |
27 | | -[`@vue-storefront/{INTEGRATION}/nuxt` { |
28 | | - i18n: { |
29 | | - // i18n config |
30 | | - } |
31 | | -}] |
32 | | -``` |
33 | | - |
34 | | -## Configuring Nuxt |
35 | | - |
36 | | -We try to use the most common modules from Nuxt Community whenever it's possible. For example, we use the `nuxt-i18n` package for internationalization and the `@nuxtjs/pwa` package PWA capabilities. You can find a list of the Nuxt modules used in the default theme [here](theme.html#preinstalled-modules-and-libraries). Each of them is configured in a way that works best for the majority of users. |
37 | | - |
38 | | -There are some features and behaviors that are specific to Vue Storefront only yet not specific to a certain integration. You can configure such things through `@vue-storefront/nuxt` module. |
39 | | - |
40 | | -[//]: # 'TODO: Add documentation for VSF/NUXT module' |
41 | | - |
42 | | -Below you can find its default configuration: |
43 | | - |
44 | | -```js |
45 | | -// nuxt.config.js |
46 | | -[ |
47 | | - `@vue-storefront/nuxt`, |
48 | | - { |
49 | | - // use only if you're developing an integration |
50 | | - // adds theme inheritance mechanism |
51 | | - coreDevelopment: false, |
52 | | - logger: { |
53 | | - // read about this part in `Getting Started > Logging` section |
54 | | - }, |
55 | | - performance: { |
56 | | - httpPush: true, |
57 | | - // installs https://purgecss.com/guides/nuxt.html |
58 | | - // CAUTION: Could break classess generated dynamically (eg variable + '-secondary') |
59 | | - purgeCSS: { |
60 | | - enabled: false, |
61 | | - paths: ['**/*.vue'], |
62 | | - }, |
63 | | - }, |
64 | | - // use `module` field from `package.json` for included packages |
65 | | - // custom configuration will be merged with the default one |
66 | | - // this property is used mainly to process ESM and benefit the most from treeshaking |
67 | | - useRawSource: { |
68 | | - dev: ['@storefront-ui/vue', '@storefront-ui/shared'], |
69 | | - prod: ['@storefront-ui/vue', '@storefront-ui/shared'], |
70 | | - }, |
71 | | - }, |
72 | | -]; |
73 | | -``` |
74 | | - |
75 | | -::: danger |
76 | | -It's unsafe and not recommended to remove `@vue-storefront/nuxt` from your project. Integrations and other modules rely on it. |
77 | | -::: |
78 | | - |
79 | | -## Configuring Server Middleware |
80 | | - |
81 | | -You can read more about the Server Middleware and its configuration on the [Server Middleware](/architecture/server-middleware.html) page. |
82 | | - |
83 | | -## Integration References |
84 | | - |
85 | | -### Setting up official eCommerce integrations |
86 | | - |
87 | | -<CommerceIntegrationLinks |
88 | | - commercetools="/commercetools/getting-started.html" |
89 | | - shopify="/shopify/api-client.html" |
90 | | -/> |
91 | | - |
92 | | -### Configuration references of official eCommerce integrations |
93 | | - |
94 | | -<CommerceIntegrationLinks |
95 | | - commercetools="/commercetools/configuration.html" |
96 | | - shopify="/shopify/api-client.html" |
97 | | -/> |
| 3 | +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. |
| 4 | + |
| 5 | +## Mandatory configuration files |
| 6 | + |
| 7 | +Every Vue Storefront project must contain two configuration files described below. They control both client and server parts of the application. |
| 8 | + |
| 9 | +### `nuxt.config.js` |
| 10 | + |
| 11 | +**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. |
| 12 | + |
| 13 | +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. |
| 14 | + |
| 15 | +### `middleware.config.js` |
| 16 | + |
| 17 | +The `middleware.config.js` file is as essential as `nuxt.confis.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. |
| 18 | + |
| 19 | +You can learn more about Server Middleware and available configuration options on the [Server Middleware](/architecture/server-middleware.html) page. |
| 20 | + |
| 21 | +## Optional configuration files |
| 22 | + |
| 23 | +Depending on the integrations used, your project might include some additional configuration files not described above. Let's walk through the most common ones. |
| 24 | + |
| 25 | +- [`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. |
| 26 | + |
| 27 | +- [`.babelrc`](https://babeljs.io/docs/en/config-files) configures Babel compiler used to make the code backward compatible with older browsers and environments. |
| 28 | + |
| 29 | +- [`jest.config.js`](https://jestjs.io/docs/configuration) configures Jest testing framework, used for writing and running unit tests. |
| 30 | + |
| 31 | +- [`.eslintrc.js`](https://eslint.org/docs/user-guide/configuring/) configures ESLint static code analyzer. It enforces code style by identifying and reporting patterns that make code inconsistent or prone to bugs. |
| 32 | + |
| 33 | +- [`.lintstagedrc`](https://github.com/okonet/lint-staged#configuration) configures lint runner that enforces code style before every Git commit. By default, it runs ESLint described above. |
| 34 | + |
| 35 | +## What's next |
| 36 | + |
| 37 | +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. |
0 commit comments