summaryrefslogtreecommitdiff
path: root/docs/customization/build.md
diff options
context:
space:
mode:
authorPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
committerPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
commit7385e139b0c9efca7430458cee982e63e282f4ae (patch)
tree1bbdb0164e556b76eec72cb558c66974c8f95dd8 /docs/customization/build.md
parentb24a483eda5ca0b0ecdb4f0c61b90d76d0d8e1e0 (diff)
downloadwebui-vue-7385e139b0c9efca7430458cee982e63e282f4ae.tar.xz
prettier: re-format
Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML files to have consistent formatting for these file types. Re-run the formatter on the whole repository. Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779 Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
Diffstat (limited to 'docs/customization/build.md')
-rw-r--r--docs/customization/build.md76
1 files changed, 30 insertions, 46 deletions
diff --git a/docs/customization/build.md b/docs/customization/build.md
index b10fd9db..4bdbd50a 100644
--- a/docs/customization/build.md
+++ b/docs/customization/build.md
@@ -26,19 +26,14 @@ VUE_APP_ENV_NAME=ibm
## Store
-:::tip
-[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the
-application's API calls.
-:::
+:::tip [Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain
+the application's API calls. :::
1. If making customizations to the default store, add `CUSTOM_STORE=true` key
value pair to the new .env file.
-2. Create a `<ENV_NAME>.js` file in `src/env/store`
- :::danger
- The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
- .env file. The store import in `src/main.js` will resolve to this new
- file.
- :::
+2. Create a `<ENV_NAME>.js` file in `src/env/store` :::danger The filename needs
+ to match the `VUE_APP_ENV_NAME` value defined in the .env file. The store
+ import in `src/main.js` will resolve to this new file. :::
3. Import the base store
4. Import environment specific store modules
5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule`
@@ -58,24 +53,17 @@ export default store;
## Router
-:::tip
-[Vue Router](https://router.vuejs.org/guide/) determines which pages are
-accessible in the UI.
-:::
+:::tip [Vue Router](https://router.vuejs.org/guide/) determines which pages are
+accessible in the UI. :::
1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key
value pair to the new .env file.
-2. Create a `<ENV_NAME>.js` file in `src/env/router`
- :::danger
- The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
- .env file. The routes import in `src/router/index.js` will resolve to this
- new file.
- :::
-3. Define new [routes](https://router.vuejs.org/api/#routes).
- :::tip
- Use static imports (over lazy-loading routes) to avoid creating separate
- JS chunks. Static imports also helps to keep the total build size down.
- :::
+2. Create a `<ENV_NAME>.js` file in `src/env/router` :::danger The filename
+ needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The
+ routes import in `src/router/index.js` will resolve to this new file. :::
+3. Define new [routes](https://router.vuejs.org/api/#routes). :::tip Use static
+ imports (over lazy-loading routes) to avoid creating separate JS chunks.
+ Static imports also helps to keep the total build size down. :::
4. Add default export
## App navigation
@@ -88,13 +76,11 @@ in src/components/AppNavigation/AppNavigation.vue.
1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key
value pair to the new .env file.
-2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation`
- :::danger
- The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
- .env file. The AppNavigationMixin import in
+2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation` :::danger
+ The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env
+ file. The AppNavigationMixin import in
`src/components/AppNavigation/AppNavigation.vue` will resolve to this new
- file.
- :::
+ file. :::
3. Your custom mixin should follow a very similar structure to the default
AppNavigationMixin.js file. It should include a data property named
`navigationItems` that should be an array of of navigation objects. Each
@@ -106,22 +92,20 @@ in src/components/AppNavigation/AppNavigation.vue.
:::tip
[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/)
-allows for easy visual customizations.
-:::
+allows for easy visual customizations. :::
1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key
value pair to the new .env file.
-2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles`
- :::danger
- The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
- .env file. The webpack sass loader will attempt to import a file with this
- name.
+2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles` :::danger The
+ filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env
+ file. The webpack sass loader will attempt to import a file with this name.
:::
-3. Add style customizations. Refer to [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/)
- for details about [color
- overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults)
- and [other customizable
- options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options).
+3. Add style customizations. Refer to
+ [bootstrap documentation](https://getbootstrap.com/docs/4.5/getting-started/theming/)
+ for details about
+ [color overrides](https://getbootstrap.com/docs/4.5/getting-started/theming/#variable-defaults)
+ and
+ [other customizable options](https://getbootstrap.com/docs/4.5/getting-started/theming/#sass-options).
Example for adding custom colors
@@ -145,9 +129,9 @@ $success: lime;
## Production build
-Run npm build script with vue-cli `--mode` [option
-flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This requires
-[corresponding .env file to exist](#setup).
+Run npm build script with vue-cli `--mode`
+[option flag](https://cli.vuejs.org/guide/mode-and-env.html#modes). This
+requires [corresponding .env file to exist](#setup).
```
npm run build -- --mode ibm