From 014437a0cb235e61e146cfc3f9563f9d1eb1eded Mon Sep 17 00:00:00 2001 From: Lucas Vilaboim Date: Fri, 7 May 2021 21:08:26 -0300 Subject: [PATCH 1/4] docs: add automatic global registration to cookbook --- src/.vuepress/config.js | 3 +- ...-global-registration-of-base-components.md | 75 +++++++++++++++++++ 2 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 src/cookbook/automatic-global-registration-of-base-components.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 24d4e79421..ed7052f222 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -6,7 +6,8 @@ const sidebar = { children: [ '/cookbook/', '/cookbook/editable-svg-icons', - '/cookbook/debugging-in-vscode' + '/cookbook/debugging-in-vscode', + '/cookbook/automatic-global-registration-of-base-components' ] } ], diff --git a/src/cookbook/automatic-global-registration-of-base-components.md b/src/cookbook/automatic-global-registration-of-base-components.md new file mode 100644 index 0000000000..85ff231bae --- /dev/null +++ b/src/cookbook/automatic-global-registration-of-base-components.md @@ -0,0 +1,75 @@ +# Automatic Global Registration of Base Components + +## Base Example + +Many of your components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#Base-component-names-strongly-recommended) and they tend to be used very frequently across your components. + +The result is that many components may include long lists of base components: + +```js +import BaseButton from './BaseButton.vue' +import BaseIcon from './BaseIcon.vue' +import BaseInput from './BaseInput.vue' +export default { + components: { + BaseButton, + BaseIcon, + BaseInput + } +} +``` + +Just to support relatively little markup in a template: + +```html + + + + +``` + +Fortunately, if you're using Webpack (or [Vue CLI](https://github.com/vuejs/vue-cli), which uses Webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`): + +```js +import { createApp } from 'vue' +import upperFirst from 'lodash/upperFirst' +import camelCase from 'lodash/camelCase' +import App from './App.vue' + +const app = createApp(App) + +const requireComponent = require.context( + // The relative path of the components folder + './components', + // Whether or not to look in subfolders + false, + // The regular expression used to match base component filenames + /Base[A-Z]\w+\.(vue|js)$/ +) + +requireComponent.keys().forEach(fileName => { + // Get component config + const componentConfig = requireComponent(fileName) + + // Get PascalCase name of component + const componentName = upperFirst( + camelCase( + // Gets the file name regardless of folder depth + fileName + .split('/') + .pop() + .replace(/\.\w+$/, '') + ) + ) + + app.component( + componentName, + // Look for the component options on `.default`, which will + // exist if the component was exported with `export default`, + // otherwise fall back to module's root. + componentConfig.default || componentConfig + ) +}) + +app.mount('#app') +``` From 77954a0c6644cd7df3b17066b9a6b677aad11856 Mon Sep 17 00:00:00 2001 From: Lucas Vilaboim Date: Mon, 10 May 2021 11:14:35 -0300 Subject: [PATCH 2/4] fix(docs): use @ instead v-on at Cookbook Co-authored-by: Natalia Tepluhina --- .../automatic-global-registration-of-base-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/cookbook/automatic-global-registration-of-base-components.md b/src/cookbook/automatic-global-registration-of-base-components.md index 85ff231bae..78f7fd71cf 100644 --- a/src/cookbook/automatic-global-registration-of-base-components.md +++ b/src/cookbook/automatic-global-registration-of-base-components.md @@ -22,8 +22,8 @@ export default { Just to support relatively little markup in a template: ```html - - + + ``` From ce5d5acf37ec00d5ad57943624452537dec5c152 Mon Sep 17 00:00:00 2001 From: Lucas Vilaboim Date: Mon, 10 May 2021 11:16:56 -0300 Subject: [PATCH 3/4] fix(docs): use lowercased webpack --- .../automatic-global-registration-of-base-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cookbook/automatic-global-registration-of-base-components.md b/src/cookbook/automatic-global-registration-of-base-components.md index 78f7fd71cf..312c2a45ae 100644 --- a/src/cookbook/automatic-global-registration-of-base-components.md +++ b/src/cookbook/automatic-global-registration-of-base-components.md @@ -28,7 +28,7 @@ Just to support relatively little markup in a template: ``` -Fortunately, if you're using Webpack (or [Vue CLI](https://github.com/vuejs/vue-cli), which uses Webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`): +Fortunately, if you're using webpack (or [Vue CLI](https://github.com/vuejs/vue-cli), which uses webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`): ```js import { createApp } from 'vue' From 688ad152e4f1a728f928d5d19dfd8532ba5389b5 Mon Sep 17 00:00:00 2001 From: Lucas Vilaboim Date: Mon, 10 May 2021 11:20:21 -0300 Subject: [PATCH 4/4] fix(docs): fix styleguide link Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- .../automatic-global-registration-of-base-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cookbook/automatic-global-registration-of-base-components.md b/src/cookbook/automatic-global-registration-of-base-components.md index 312c2a45ae..c754c25c7e 100644 --- a/src/cookbook/automatic-global-registration-of-base-components.md +++ b/src/cookbook/automatic-global-registration-of-base-components.md @@ -2,7 +2,7 @@ ## Base Example -Many of your components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#Base-component-names-strongly-recommended) and they tend to be used very frequently across your components. +Many of your components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#base-component-names-strongly-recommended) and they tend to be used very frequently across your components. The result is that many components may include long lists of base components: