{"id":283,"date":"2018-10-24T15:43:40","date_gmt":"2018-10-24T15:43:40","guid":{"rendered":"https:\/\/jmrowe.com\/blog\/?p=283"},"modified":"2019-03-01T21:09:19","modified_gmt":"2019-03-01T21:09:19","slug":"vuejs-notes","status":"publish","type":"post","link":"https:\/\/jmrowe.com\/blog\/vuejs-notes\/","title":{"rendered":"Vuejs notes"},"content":{"rendered":"<p><strong>Mass registering global components<\/strong><\/p>\n<p>Import top level components and export them as an Array:<\/p>\n<pre class=\"lang:default decode:true \">\/\/ File: \/components\/index.js\r\n\r\nimport Component1 from '.\/Component1.vue';\r\nimport Component2 from '.\/Component2.vue';\r\nimport Component3 from '.\/Component3.vue';\r\n\r\nexport default [\r\n    Component1,\r\n    Component2,\r\n    Component3\r\n];<\/pre>\n<p>Then in main.js we loop through the components and register them globally:<\/p>\n<pre class=\"lang:default decode:true\">import Vue from 'vue';\r\nimport globalComponents from '.\/components';\r\n\r\nglobalComponents.forEach(component =&gt; {\r\n    Vue.component(component.name, component);\r\n});\r\n\r\n\/\/ load Vue<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Useful Vuejs libraries<\/strong><\/p>\n<p>https:\/\/cdn.jsdelivr.net\/npm\/v-mask\/dist\/v-mask.min.js\u00a0 can be used for phone and zip code masks to prevent bad input. Also works with Element UI. Just include via cdn and then can be used as a directive i.e. :<\/p>\n<pre class=\"lang:js decode:true \">&lt;el-input v-model=\"phone\" v-mask=\"'(###) ###-####'\" &gt;&lt;\/el-input&gt;<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mass registering global components Import top level components and export them as an Array: \/\/ File: \/components\/index.js import Component1 from &#8216;.\/Component1.vue&#8217;; import Component2 from &#8216;.\/Component2.vue&#8217;; import Component3 from &#8216;.\/Component3.vue&#8217;; export default [ Component1, Component2, Component3 ]; Then in main.js we loop through the components and register them globally: import Vue from &#8216;vue&#8217;; import globalComponents from [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-283","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":4,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/283\/revisions"}],"predecessor-version":[{"id":356,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/283\/revisions\/356"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}