Initial Set Up<\/h2>\n
Let’s assume that we have created a project using the vue cli<\/a>.<\/p>\n To understand this, let’s take, for example, the most commonly created components we’ll use throughout the app. We have common base components such as BaseInput, BaseButton, BaseCard, BaseCheckbox, BaseForm, BaseSelect, etc., with basic functionalities.<\/p>\n In order to use these base components, we have to import and register components in the script section of each parent component as shown below:<\/p>\n With this, we have successfully registered each component locally.<\/p>\n We might need to use these components repeatedly. To avoid this repetition, we can register these base\/common components globally so that we can use them in several components of our app.<\/p>\n Navigate to the file src\/main.js<\/mark>. Import the components and register them as shown below.<\/p>\n What will happen when our app starts growing and has tons of common components? Do we need to register them one by one and use them? Yes, that can be done, but it’s an inefficient and old-school way of doing it! And whenever we create a new common component, we must go back and forth between the new component and the src\/main.js file to register and use them.<\/p>\n Well, we can register each base component with a few lines of code. For example, BaseButton.vue, BaseInput.vue, BaseCard.vue, and in general, every component that has the pattern Base*.vue (in this case). Let’s see its implementation.<\/p>\n Create Global Component Container<\/span> Install the Lodash library using the below command.<\/p>\n Navigate to src\/main.js<\/mark> and add the following code to the file.<\/p>\n Import Lodash’s upperFirst and camelCase functions<\/strong><\/p>\n Use require. context to search every component in the src\/components\/base directory that starts with Base.<\/strong><\/p>\n We’re going to convert component names to the pascalCase format.<\/strong><\/p>\n Now that we have all the components’ names, register them globally.<\/strong><\/p>\n Note: For this to work, one must follow the naming conventions while creating components. Without a regular pattern in the names of the components, this trick might not work.<\/i><\/p>\n Visit the source code here and feel free to clone the repository. You can try it your way and explore more about it.<\/p>\n Github link:<\/strong> https:\/\/github.com\/nency-gajjar\/best-way-to-register-common-component<\/a><\/p>\n And that’s pretty much it! This is how we can register common components globally in VueJS without importing all the components. It can be done within a few lines of code without having to worry about registering the newly created standard components again and again. We hope the step-by-step guideline was useful to you! For more such guidelines on basic and advanced VueJS concepts, visit the VueJs tutorials page<\/a>. Every blog post has a github source code repository; clone that repo, and start coding.<\/p>\n","protected":false},"excerpt":{"rendered":" Introduction Components in Vue are like widgets. We can write reusable custom elements the way we want. Components are nothing but objects consisting of all the options contained by root or Vue instance. In general, there are two ways to register a component (1) Globally (2) Locally Global registration isn’t ideal in all cases, but […]<\/p>\n","protected":false},"author":129,"featured_media":31083,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[1244],"tags":[],"coauthors":[2096],"class_list":["post-31072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vuejs"],"acf":[],"modified_by":"Aditya Goswami","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/31072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/129"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=31072"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/31072\/revisions"}],"predecessor-version":[{"id":57593,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/31072\/revisions\/57593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/31083"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=31072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=31072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=31072"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=31072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Local Registration<\/h2>\n
![\"import](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/10\/import-and-register-components-in-the-script-section-min.png\")
<\/p>\nGlobal Registration<\/h2>\n
![\"Import](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/10\/Import-the-components-min.png\")
<\/p>\nWhat’s the problem here?<\/h3>\n
What is the better way?<\/h3>\n
\nWith global registration and using the app.component() method: make components available globally in the current Vue application. Hire Vue developer<\/a> to get the job done<\/i><\/strong><\/p>\nBest Way to Register Common Components Globally in VueJS<\/h2>\n
npm install lodash --save<\/pre>\n
import Vue from \"vue\";\r\nimport App from \".\/App.vue\";\r\nimport router from \".\/router\";\r\nimport store from \".\/store\";\r\nimport upperFirst from 'lodash\/upperFirst'\r\nimport camelCase from 'lodash\/camelCase'<\/pre>\n
const requireComponent = require.context(\r\n '~\/components\/base',\r\n true,\r\n \/Base[A-Z]\\w+\\.(vue|js)$\/\r\n)<\/pre>\n
Explanation<\/h3>\n
\n
requireComponent.keys().forEach(fileName => {\r\n const componentConfig = requireComponent(fileName)\r\n\r\n const componentName = upperFirst(\r\n camelCase(\r\n fileName\r\n .split('\/')\r\n .pop()\r\n .replace(\/\\.\\w+$\/, '')\r\n )\r\n )\r\n<\/pre>\nVue.component(\r\n componentName,componentConfig.default || componentConfig\r\n)<\/pre>\n
Github Repository<\/h2>\n
Conclusion<\/h2>\n