Import components globally

src/elements/Heading.vue

@@ -6,15 +6,15 @@
 
 <script>
 /**
-   * @version `prototype`
-   */
+ * @version `prototype`
+ */
 export default {
   name: "Heading",
   props: {
     /**
-       * The heading level used for the heading.
-       * `h1, h2, h3, h4, h5, h6`
-       */
+     * The heading level used for the heading.
+     * `h1, h2, h3, h4, h5, h6`
+     */
     level: {
       type: String,
       default: "h1"

src/elements/SvgIcon.vue

@@ -8,42 +8,42 @@ let cache = new Map();
 const req = require.context("@/assets/icons/", true, /^\.\/.*\.svg$/);
 
 /**
-     * @version `wip`
-     */
+ * @version `wip`
+ */
 export default {
   name: "SvgIcon",
   props: {
     /**
-         * The name of the icon to display
-         */
+     * The name of the icon to display
+     */
     name: {
       required: true,
       default: "settings"
     },
     /**
-         * The fill color of the SVG icon
-         */
+     * The fill color of the SVG icon
+     */
     fill: {
       type: String,
       default: "#00264c"
     },
     /**
-         * Descriptive text to be read to screenreaders
-         */
+     * Descriptive text to be read to screenreaders
+     */
     ariaLabel: {
       type: String,
       default: "icon"
     },
     /**
-         * The html element name used for the icon
-         */
+     * The html element name used for the icon
+     */
     type: {
       type: String,
       default: "span"
     },
     /**
-         * The size of the icon
-         */
+     * The size of the icon
+     */
     size: {
       type: String,
       default: "16px"

src/elements/TextLink.vue

@@ -6,22 +6,22 @@
 
 <script>
 /**
-   * @version `ready`
-   */
+ * @version `ready`
+ */
 export default {
   name: "TextLink",
   props: {
     /**
-       * The URL for the link
-       */
+     * The URL for the link
+     */
     href: {
       default: "#",
       required: true
     },
     /**
-       * Specifies where to display the linked URL.
-       * `_self, _blank, _parent, _top`
-       */
+     * Specifies where to display the linked URL.
+     * `_self, _blank, _parent, _top`
+     */
     target: {
       type: String,
       default: "_self"

src/elements/TextStyle.vue

@@ -6,22 +6,22 @@
 
 <script>
 /**
-   * @version `ready`
-   */
+ * @version `ready`
+ */
 export default {
   name: "TextStyle",
   props: {
     /**
-       * The html element name used for the text
-       */
+     * The html element name used for the text
+     */
     type: {
       type: String,
       default: "p"
     },
     /**
-       * Style variation to give additional meaning.
-       * `default, disabled, strong, positive, negative`
-       */
+     * Style variation to give additional meaning.
+     * `default, disabled, strong, positive, negative`
+     */
     variation: {
       type: String,
       default: "default"

src/elements/Wrapper.vue

@@ -6,14 +6,14 @@
 
 <script>
 /**
-   * @version `wip`
-   */
+ * @version `wip`
+ */
 export default {
   name: "Wrapper",
   props: {
     /**
-       * The html element name used for the wrapper
-       */
+     * The html element name used for the wrapper
+     */
     type: {
       type: String,
       default: "div"

src/main.js

@@ -1,10 +1,26 @@
-// The Vue build version to load with the `import` command
+// VDS: The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from "vue";
 import App from "./App";
 import router from "./router";
 import webFontLoader from "./utils/webFontLoader";
 
+// VDS: Importing components globally
+import Heading from "@/elements/Heading";
+import TextStyle from "@/elements/TextStyle";
+import TextLink from "@/elements/TextLink";
+import Wrapper from "@/elements/Wrapper";
+import SvgIcon from "@/elements/SvgIcon";
+import NavBar from "@/patterns/NavBar";
+
+// VDS: Registering components for local usage
+Vue.component("heading", Heading);
+Vue.component("text-style", TextStyle);
+Vue.component("text-link", TextLink);
+Vue.component("wrapper", Wrapper);
+Vue.component("svg-icon", SvgIcon);
+Vue.component("nav-bar", NavBar);
+
 Vue.config.productionTip = false;
 
 /* eslint-disable no-new */

src/patterns/NavBar.vue

@@ -6,31 +6,31 @@
 
 <script>
 /**
-   * @version `ready`
-   */
+ * @version `ready`
+ */
 export default {
   name: "NavBar",
   model: {
     prop: "active"
   },
   props: {
     /**
-       * The html element name used for the nav bar.
-       */
+     * The html element name used for the nav bar.
+     */
     type: {
       type: String,
       default: "nav"
     },
     /**
-       * State which tab is active when initiated (using name of the component).
-       */
+     * State which tab is active when initiated (using name of the component).
+     */
     active: {
       required: true,
       type: String
     },
     /**
-       * Menu items to be displayed on the nav bar.
-       */
+     * Menu items to be displayed on the nav bar.
+     */
     navItems: {
       required: true,
       type: Array

src/templates/Index.vue

@@ -12,24 +12,11 @@
 </template>
 
 <script>
-import Heading from "@/elements/Heading";
-import TextStyle from "@/elements/TextStyle";
-import TextLink from "@/elements/TextLink";
-import Wrapper from "@/elements/Wrapper";
-import NavBar from "@/patterns/NavBar";
-
 /**
  * @version `prototype`
  */
 export default {
   name: "Index",
-  components: {
-    heading: Heading,
-    textStyle: TextStyle,
-    textLink: TextLink,
-    navBar: NavBar,
-    wrapper: Wrapper
-  },
   props: {
     /**
      * The html element name used for the component

src/templates/NotFound.vue

@@ -12,24 +12,15 @@
 </template>
 
 <script>
-import Heading from "@/elements/Heading";
-import TextStyle from "@/elements/TextStyle";
-import Wrapper from "@/elements/Wrapper";
-
 /**
-   * @version `prototype`
-   */
+ * @version `prototype`
+ */
 export default {
   name: "NotFound",
-  components: {
-    heading: Heading,
-    textStyle: TextStyle,
-    wrapper: Wrapper
-  },
   props: {
     /**
-       * The html element name used for the component
-       */
+     * The html element name used for the component
+     */
     type: {
       type: String,
       default: "div"