{"_path":"/posts/vue-automatic-component-imports","_draft":false,"_partial":false,"_empty":false,"title":"Building a Vue Auto Component Importer - A Better Dev Experience","description":"Components magically being imported into your app is the latest developer experience trend in Vue. Why does it exist and how does it work?","publishedAt":"2020-12-22","image":"https://harlanzw.com/social/vue-automatic-component-imports.png","tags":["webpack","vue"],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When first learning Vue, you are taught you need to import and add components to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" in the script block."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<script>\nimport HelloWorld from '@/components/HelloWorld.vue'\nexport default {\n  components: {\n    HelloWorld\n  }\n}\n</script>\n\n<template>\n  <HelloWorld />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" HelloWorld "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"@/components/HelloWorld.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  components"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    HelloWorld"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"HelloWorld"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"However, there's been a recent trend to \"upgrade\" the Vue developer experience (DX), having components magically import themselves\nat compile-time."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<template>\n  <HelloWorld />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"HelloWorld"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the wild, you can find auto component imports in most popular Vue frameworks, as part of the core or a plugin."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/components","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt Components"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/vuetifyjs/vuetify-loader","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vuetify"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/segunadebayo/chakra-ui","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Chakra"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/harlan-zw/vue-cli-plugin-import-components","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue CLI"}]},{"type":"text","value":" (built by me)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/antfu/vite-plugin-components","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vite"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This article will look at: why automatic component imports exist, how you can easily build our own auto component importer using\na Webpack loader and what the performance cost of using them has on your app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, we'll look at some other compile-time DX upgrades that are possible."}]},{"type":"element","tag":"h2","props":{"id":"why-automatic-component-imports"},"children":[{"type":"text","value":"Why Automatic Component Imports?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"why"}]},{"type":"text","value":" that comes first to my mind, is the developer experience is great. No more confusion or typos on import paths,\nrefactoring becomes easier and there's less code overall."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The unintuitive but equally great advantage is found in the problem that this feature first solved."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The UI framework "},{"type":"element","tag":"a","props":{"href":"https://vuetifyjs.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vuetify"}]},{"type":"text","value":" is a huge library of over 80 components, coming in at "},{"type":"element","tag":"a","props":{"href":"https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.17/vuetify.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"99.4KB"}]},{"type":"text","value":"\nfor their scripts. As far as I know, they were the first to introduce automatic component imports."}]},{"type":"element","tag":"h3","props":{"id":"problem-ui-framework-bloat"},"children":[{"type":"text","value":"Problem: UI Framework Bloat"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"One of the complaints you'll hear about using a UI framework over something simple like "},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TailwindCSS"}]},{"type":"text","value":",\nis the bloat it will add to your app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a valid concern. It's unlikely your application is going to need half the components that a UI framework has to offer. Forcing\nbrowsers to download code that will never run, dead code, is not ideal."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Additionally, this component bloat can make import paths harder to work with and further scope for issues to pop up."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So, how do Vuetify and other UI frameworks overcome their inherent bloat?"}]},{"type":"element","tag":"h3","props":{"id":"solution-webpack-optimisations"},"children":[{"type":"text","value":"Solution: webpack Optimisations"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As is the way, webpack is here to magically solve our problems with "},{"type":"element","tag":"a","props":{"href":"https://webpack.js.org/guides/tree-shaking/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"tree shaking"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://webpack.js.org/guides/code-splitting/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"code splitting"}]},{"type":"text","value":" optimisations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If tree shaking is new to you, you can think of it as an optimisation to remove code that isn't explicitly used. Banishing\n'dead' code to the shadow realm."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The tree shaking optimisation requires ES2015 module syntax, (i.e. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"export"}]},{"type":"text","value":") and a production build. The code can't be compiled\nto CommonJS modules (i.e. "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"require"}]},{"type":"text","value":") for it to work."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So how does all this relate to automatic component imports?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With Vuetify handling the imports of your components ("},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://vuetifyjs.com/en/features/treeshaking/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"à la carte"}]}]},{"type":"text","value":" as they call it), they\ncan ensure webpack optimisations are running out of the box for your app with their component library."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The A la carte system enables you to pick and choose which components to import, drastically lowering your build size."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will also make code-splitting more effective, as webpack will only load the components required for that chunk to be displayed."}]}]},{"type":"element","tag":"h2","props":{"id":"fundamental-how-does-webpack-load-vue-files"},"children":[{"type":"text","value":"Fundamental: How Does webpack Load Vue Files?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Before we jump into building our own automatic component importer, we'll need to have a basic understanding of how webpack loads Vue files."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When you request a resource (such as a file) in webpack, it pushes the request through a pipeline of webpack loaders to resolve the output. A webpack loader is a piece of code which will transform a resource from one thing into another, it has an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"input"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"output"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, the "},{"type":"element","tag":"a","props":{"href":"https://v4.webpack.js.org/loaders/raw-loader/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"raw-loader"}]},{"type":"text","value":" will read a file and give you the string contents.\nThe "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"input"}]},{"type":"text","value":" is a path to a file in your filesystem, the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"output"}]},{"type":"text","value":" is the string contents of the file."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"import txt from 'raw-loader!./hello.txt'\n// txt=HelloWorld\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" txt "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"raw-loader!./hello.txt"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// txt=HelloWorld"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vue-loader"}]},{"type":"text","value":" is the loader for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".vue"}]},{"type":"text","value":" files. The loader compiles and bundles your component Single File Component (SFC) into code\nthat the browser can understand and run."}]},{"type":"element","tag":"h3","props":{"id":"vue-loader-in-action"},"children":[{"type":"text","value":"Vue Loader in Action"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's take a look at an example of input and output from the vue-loader."}]},{"type":"element","tag":"h4","props":{"id":"input-appvue"},"children":[{"type":"text","value":"Input: App.vue"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is the default entry file for Vue CLI with Vue 3."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<script>\nimport HelloWorld from './components/HelloWorld.vue'\n\nexport default {\n  name: 'App',\n  components: {\n    HelloWorld\n  }\n}\n</script>\n\n<template>\n  <img alt=\"Vue logo\" src=\"./assets/logo.png\">\n  <HelloWorld msg=\"Welcome to Your Vue.js App\" />\n</template>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" HelloWorld "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./components/HelloWorld.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  components"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    HelloWorld"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Vue logo"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./assets/logo.png"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"HelloWorld"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"msg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Welcome to Your Vue.js App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"#app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"font-family"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" Avenir, "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"Helvetica"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"Arial"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"sans-serif"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"-webkit-font-smoothing"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"antialiased"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"-moz-osx-font-smoothing"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"grayscale"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"text-align"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"center"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"#2c3e50"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"margin-top"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"60"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"output-appvue"},"children":[{"type":"text","value":"Output: App.vue"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Internally, the loader parses this code using the compiler, getting an SFC descriptor object that is used to create the\nfinal string output of the loader."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"import { render } from './App.vue?vue&type=template&id=7ba5bd90'\nimport script from './App.vue?vue&type=script&lang=js'\n\nimport './App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css'\nexport * from './App.vue?vue&type=script&lang=js'\nscript.render = render\nscript.__file = 'src/App.vue'\n\nexport default script\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" { render } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./App.vue?vue&type=template&id=7ba5bd90"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" script "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./App.vue?vue&type=script&lang=js"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./App.vue?vue&type=script&lang=js"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"script.render "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" render"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"script.__file "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"src/App.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" script"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: I've removed the Hot Module Reloading (HMR) code for simplicity here."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The output of the loader isn't that important to understand, just know that the vue-loader has an in and out function. The output\nis usually parsed to another loader such as "},{"type":"element","tag":"a","props":{"href":"https://github.com/babel/babel-loader","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"babel-loader"}]},{"type":"text","value":" before being chunked."}]},{"type":"element","tag":"h2","props":{"id":"building-an-automatic-component-importer"},"children":[{"type":"text","value":"Building an Automatic Component Importer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have some spare time, I'd encourage you to join along. You can use "},{"type":"element","tag":"a","props":{"href":"https://cli.vuejs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue CLI"}]},{"type":"text","value":" with the Vue 3 preset."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"vue create auto-component-importer -p __default_vue_3__\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"vue create auto-component-importer -p __default_vue_3__"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To begin, let's remove the manual import from the entry SFC, like so:"}]},{"type":"element","tag":"h3","props":{"id":"new-appvue"},"children":[{"type":"text","value":"New App.vue"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"App.vue"}]},{"type":"element","tag":"code","props":{"code":"<script>\nexport default {\n  name: 'App',\n}\n</script>\n\n<template>\n  <img alt=\"Vue logo\" src=\"./assets/logo.png\">\n  <HelloWorld msg=\"Welcome to Your Vue.js App\" />\n</template>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>\n","filename":"App.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Vue logo"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./assets/logo.png"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"HelloWorld"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"msg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"Welcome to Your Vue.js App"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"#app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"font-family"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" Avenir, "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"Helvetica"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"Arial"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"sans-serif"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"-webkit-font-smoothing"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"antialiased"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"-moz-osx-font-smoothing"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"grayscale"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"text-align"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"center"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"#2c3e50"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"margin-top"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"60"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When we load our "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"App.vue"}]},{"type":"text","value":", the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"HelloWorld"}]},{"type":"text","value":" doesn't work, as expected. Our goal is to get it to work without touching the Vue code."}]},{"type":"element","tag":"h3","props":{"id":"step-1-modify-the-webpack-configuration"},"children":[{"type":"text","value":"Step 1. Modify the webpack Configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We need to make sure the loader we'll be making is going to run after the vue-loader."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"./vue.config.js"}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  chainWebpack: (config) => {\n    config.module\n      .rules\n      .get('vue')\n      .use('components')\n      .loader(require.resolve('./imports-loader'))\n      .before('vue-loader')\n      .end()\n  }\n}\n","filename":"./vue.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"chainWebpack"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    config.module"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      .rules"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      ."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      ."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"components"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      ."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(require."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./imports-loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      ."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"before"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"vue-loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      ."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"end"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you'd like to see the raw webpack config example, open the below."}]},{"type":"element","tag":"details","props":{},"children":[{"type":"text","value":"\n  "},{"type":"element","tag":"summary","props":{},"children":[{"type":"text","value":"webpack.config.js example"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"webpack.config.js"}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      }\n    ]\n  }\n}\n","filename":"webpack.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    rules"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"        test"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF5555"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"\\.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF5555"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"        loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"vue-loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Knowing that webpack loaders are loaded from bottom to top, we would modify the configuration as so:"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"webpack.config.js"}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  // ...\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        use: [\n          {\n            loader: require.resolve('./imports-loader'),\n          },\n          {\n            loader: 'vue-loader',\n          }\n        ]\n      },\n    ]\n  }\n}\n","filename":"webpack.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    rules"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"        test"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF5555"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"\\.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF5555"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"        use"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"          {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"            loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" require."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./imports-loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"          },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"          {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"            loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"vue-loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"          }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"        ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"tip","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Normally a webpack would handle this configuration changing for you."}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now we create the loader called "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imports-loader.js"}]},{"type":"text","value":" in your apps root directory. We're going to make sure we only run it for the virtual SFC module."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"imports-loader.js"}]},{"type":"element","tag":"code","props":{"code":"module.exports = function loader(source) {\n  // only run for the virtual SFC\n  if (this.resourceQuery)\n    return source\n\n  console.log(source)\n  return source\n}\n","filename":"imports-loader.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// only run for the virtual SFC"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".resourceQuery)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(source)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"source"}]},{"type":"text","value":" variable is the output of the vue-loader, the "},{"type":"element","tag":"a","props":{"href":"#output-app-vue"},"children":[{"type":"text","value":"Output: App.vue"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here we can now change anything about how our components work by modifying the vue-loader output."}]},{"type":"element","tag":"h3","props":{"id":"step-2-dumb-compile-time-import"},"children":[{"type":"text","value":"Step 2. Dumb Compile-Time Import"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As a proof of concept, let's try to import the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"HelloWorld.vue"}]},{"type":"text","value":" component so our "},{"type":"element","tag":"a","props":{"href":"#new-app-vue"},"children":[{"type":"text","value":"New App.vue"}]},{"type":"text","value":" works."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"At this stage, we can just append the import code on to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"source"}]},{"type":"text","value":"."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"imports-loader.js"}]},{"type":"element","tag":"code","props":{"code":"module.exports = function loader(source) {\n  // only run for the virtual SFC\n  if (this.resourceQuery)\n    return source\n\n  return `${source}\nimport HelloWorld from \"@/components/HelloWorld.vue\"\nscript.components = Object.assign({ HelloWorld }, script.components)\n`\n}\n","filename":"imports-loader.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// only run for the virtual SFC"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".resourceQuery)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"import HelloWorld from \"@/components/HelloWorld.vue\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"script.components = Object.assign({ HelloWorld }, script.components)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"App.vue"}]},{"type":"text","value":" now knows what the HelloWorld component is and works. Try it yourself."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: This is a "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"dumb"}]},{"type":"text","value":" solution, as it will be modifying "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"HelloWorld.vue"}]},{"type":"text","value":" to also import itself."}]},{"type":"element","tag":"h3","props":{"id":"step-3-making-it-smart"},"children":[{"type":"text","value":"Step 3. Making it smart"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A smarter solution would give us the ability to add components to our component folder and use them straight away without\nany imports."}]},{"type":"element","tag":"h4","props":{"id":"a-scan-components"},"children":[{"type":"text","value":"a. Scan components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The first step in making it smarter is we need to create a map of the components files we want to automatically import."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recursively iterate over the components folder and do some mapping."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"a. Scan components"}]},{"type":"element","tag":"code","props":{"code":"const base = './src/components/'\nconst fileComponents = (await globby('*.vue', { cwd: base })).map((c) => {\n  const name = path.parse(c).name\n  const shortPath = path.resolve(base).replace(path.resolve('./src'), '@')\n  return {\n    name,\n    import: `import ${name} from \"${shortPath}/${c}\"`\n  }\n})\n// [ { name: 'HelloWorld', import: 'import HelloWorld from \"@/components/HelloWorld.vue\"' } ]\n","filename":"a. Scan components","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" base "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src/components/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" fileComponents "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"globby"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"*.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", { cwd"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" base }))."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" name "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" path."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(c).name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" shortPath "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" path."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(base)."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"replace"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(path."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    name,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`import "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" from \""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"shortPath"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"\"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// [ { name: 'HelloWorld', import: 'import HelloWorld from \"@/components/HelloWorld.vue\"' } ]"}]}]}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"b-find-the-template-tags"},"children":[{"type":"text","value":"b. Find the template tags"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To understand what components are being used, we need to have our new loader to compile the SFC "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<template>"}]},{"type":"text","value":" blocks."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"b. Find the template tags"}]},{"type":"element","tag":"code","props":{"code":"const compiler = require('@vue/compiler-sfc')\nconst parsed = compiler.parse(fs.readFileSync(`${this.context}/${path.basename(this.resourcePath)}`, 'utf8')).descriptor\nconst template = compiler.compileTemplate({\n  id: 'tmp',\n  source: parsed.template.content,\n  filename: this.resourcePath,\n})\nconst componentTags = template.ast.components\n// [ 'HelloWorld' ]\n","filename":"b. Find the template tags","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" compiler "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"@vue/compiler-sfc"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" parsed "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" compiler."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(fs."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"readFileSync"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".context"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"path."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"basename"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".resourcePath)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"utf8"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")).descriptor"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" template "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" compiler."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"compileTemplate"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"tmp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" parsed.template.content,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  filename"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".resourcePath,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" componentTags "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" template.ast.components"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// [ 'HelloWorld' ]"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: For simplicity, we're using Vue 3's compiler. The above won't work for Vue 2."}]},{"type":"element","tag":"h4","props":{"id":"c-matchmaking"},"children":[{"type":"text","value":"c. Matchmaking"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With our freshly compiled template, we need to match the components we found in our template with the mapped component files\nfrom "},{"type":"element","tag":"a","props":{"href":"#a-scan-components"},"children":[{"type":"text","value":"a. Scan Components"}]},{"type":"text","value":"."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"c. Match making"}]},{"type":"element","tag":"code","props":{"code":"const matches = []\ncomponentTags.forEach(tag => matches.push(first(filter(fileComponents, c => c.name === tag))))\n// [ { name: 'HelloWorld', import: 'import HelloWorld from \"@/components/HelloWorld.vue\"' } ]\n","filename":"c. Match making","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" matches "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" []"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"componentTags."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"forEach"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"tag"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" matches."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"first"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"filter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(fileComponents, "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" c.name "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" tag))))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// [ { name: 'HelloWorld', import: 'import HelloWorld from \"@/components/HelloWorld.vue\"' } ]"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you wanted to match non-PascalCase names, you would modify this matcher function."}]},{"type":"element","tag":"h4","props":{"id":"d-insert-the-new-dynamic-imports"},"children":[{"type":"text","value":"d. Insert the new dynamic imports"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The final piece of the puzzle is appending the list of matched components and inserting the import line and assigning\nthe components."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"d. Insert the new dynamic imports"}]},{"type":"element","tag":"code","props":{"code":"if (!matches.length)\n  return source\n\nconst newContent = `\n${matches.map(c => c.import).join('\\n')}\nscript.components = Object.assign({ ${matches.map(c => c.name).join(', ')} }, script.components);\n`\nconst hotReload = source.indexOf('/* hot reload */')\nif (hotReload > -1)\n  source = `${source.slice(0, hotReload) + newContent}\\n\\n${source.slice(hotReload)}`\nelse\n  source += `\\n\\n${newContent}`\n\nreturn source\n","filename":"d. Insert the new dynamic imports","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"matches.length)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" newContent "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"matches."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"c.import)."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"script.components = Object.assign({ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"matches."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"c.name)."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" }, script.components);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" hotReload "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"indexOf"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/* hot reload */"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" (hotReload "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  source "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"source."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"slice"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"hotReload)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"newContent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}\\n\\n${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"source."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"slice"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(hotReload)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"else"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  source "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n\\n${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"newContent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We need to insert the new content before the HMR code if available, otherwise we need to restart our app to find\nnew components."}]},{"type":"element","tag":"h3","props":{"id":"putting-it-all-together"},"children":[{"type":"text","value":"Putting it all together"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is the full "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"imports-loader.js"}]},{"type":"text","value":" for reference. This loader should "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"just work"}]},{"type":"text","value":". Create\na new component and then use it straight away, make sure you use PascalCase."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"imports-loader.js"}]},{"type":"element","tag":"code","props":{"code":"const fs = require('fs')\nconst path = require('path')\nconst globby = require('globby')\nconst first = require('lodash/first')\nconst filter = require('lodash/filter')\n\nmodule.exports = async function loader(source) {\n  // only run for the non-query requests\n  if (this.resourceQuery)\n    return source\n\n  // a. Scan components\n  const base = './src/components/'\n  const fileComponents = (await globby('*.vue', { cwd: base })).map((c) => {\n    const name = path.parse(c).name\n    const shortPath = path.resolve(base).replace(path.resolve('./src'), '@')\n    return {\n      name,\n      import: `import ${name} from \"${shortPath}/${c}\"`\n    }\n  })\n\n  // b. Find the template tags\n  const compiler = require('@vue/compiler-sfc')\n  const parsed = compiler.parse(fs.readFileSync(`${this.context}/${path.basename(this.resourcePath)}`, 'utf8')).descriptor\n  const template = compiler.compileTemplate({\n    id: 'na',\n    source: parsed.template.content,\n    filename: this.resourcePath,\n  })\n  const componentTags = template.ast.components\n\n  // c. Match making\n  const matches = []\n  componentTags.forEach(tag => matches.push(first(filter(fileComponents, c => c.name === tag))))\n\n  // d. Insert the new dynamic imports\n  if (!matches.length)\n    return source\n\n  const newContent = `\n${matches.map(c => c.import).join('\\n')}\nscript.components = Object.assign({ ${matches.map(c => c.name).join(', ')} }, script.components);\n`\n  const hotReload = source.indexOf('/* hot reload */')\n  if (hotReload > -1)\n    source = `${source.slice(0, hotReload) + newContent}\\n\\n${source.slice(hotReload)}`\n  else\n    source += `\\n\\n${newContent}`\n\n  return source\n}\n","filename":"imports-loader.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" fs "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"fs"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" path "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" globby "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"globby"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" first "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"lodash/first"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" filter "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"lodash/filter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// only run for the non-query requests"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".resourceQuery)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// a. Scan components"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" base "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src/components/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" fileComponents "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"globby"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"*.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", { cwd"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" base }))."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" name "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" path."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(c).name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" shortPath "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" path."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(base)."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"replace"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(path."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      name,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`import "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" from \""}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"shortPath"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"\"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// b. Find the template tags"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" compiler "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"@vue/compiler-sfc"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" parsed "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" compiler."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(fs."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"readFileSync"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".context"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"path."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"basename"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".resourcePath)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"utf8"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")).descriptor"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" template "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" compiler."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"compileTemplate"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"na"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" parsed.template.content,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    filename"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".resourcePath,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" componentTags "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" template.ast.components"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// c. Match making"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" matches "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" []"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  componentTags."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"forEach"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"tag"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" matches."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"first"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"filter"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(fileComponents, "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" c.name "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" tag))))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// d. Insert the new dynamic imports"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"matches.length)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" newContent "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"matches."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"c.import)."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"script.components = Object.assign({ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"matches."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"c.name)."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" }, script.components);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" hotReload "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"indexOf"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/* hot reload */"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" (hotReload "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    source "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"source."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"slice"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"hotReload)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"newContent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}\\n\\n${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"source."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"slice"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(hotReload)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"else"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    source "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n\\n${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"newContent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" source"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"tip","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are several issues and edge cases with the above code, this is merely a proof of concept and shouldn't be used in\nproduction."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're after a more complete solution you should clone the repos listed before."}]}]},{"type":"element","tag":"h2","props":{"id":"problems-with-automatic-component-imports"},"children":[{"type":"text","value":"Problems With Automatic Component Imports"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hopefully, you now have a better understanding of how auto component importing works. While working through that rough proof of\nconcept, you may have foreseen some issues."}]},{"type":"element","tag":"h3","props":{"id":"performance-cost"},"children":[{"type":"text","value":"Performance Cost"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For automatic component imports to provide their magic, they need to parse the SFC and compile the template at compile time. If you recall,\nwe are running our loader after the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vue-loader"}]},{"type":"text","value":", that means this compilation has already been completed and is happening again."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This means that by using this feature, we are potentially "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"doubling our component build time"}]},{"type":"text","value":". Which affects the hot module\nreplacement speed, the web-dev-server boot-time and the production build time."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Saying that certain optimisations can and are made. Loader output can be cached with one line, so unless we change a file\nwe don't need to recompile it."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"imports-loaders.js"}]},{"type":"element","tag":"code","props":{"code":"// ...\nmodule.exports = async function loader(source) {\n  this.cache()\n  // ...\n}\n","filename":"imports-loaders.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"loader"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"cache"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For Vue 3 there may be a new way to optimise this feature. I've based the proof of concept on how the existing Vue 2 plugins work."}]},{"type":"element","tag":"h3","props":{"id":"static-code-only"},"children":[{"type":"text","value":"Static code only"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have a dynamic import then it's not going to work. I don't think this is a massive issue as you can\nwork around it with manual imports or using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v-if"}]},{"type":"text","value":" on inline components. Consider the below\ncode:"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<script>\nexport default {\n  computed: {\n    myComponent() {\n      return Math.random() * 100 > 50 ? ComponentA : ComponentB\n    }\n  }\n}\n</script>\n\n<template>\n  <component :is=\"myComponent\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  computed"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"myComponent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"Math"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"random"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"50"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ComponentA "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ComponentB"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"component"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"is"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"myComponent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For now, the automatic import of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ComponentA"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ComponentB"}]},{"type":"text","value":" is not possible."}]},{"type":"element","tag":"h3","props":{"id":"stricter-component-naming"},"children":[{"type":"text","value":"Stricter component naming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Due to the nature of mapping a file name to a component name, it sets a few requirements around how you name your components.\nIf you're following the Vue "},{"type":"element","tag":"a","props":{"href":"https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"style-guide"}]},{"type":"text","value":" for component naming, you shouldn't have an issue."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're going to adopt automatic component imports I'd recommend the following rules:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Namespace all components (i.e "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"HButtonOutline"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"H"}]},{"type":"text","value":" is the namespace)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid non-unique component file names"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use nested folders to separate scopes"}]}]},{"type":"element","tag":"h2","props":{"id":"other-compile-time-upgrades"},"children":[{"type":"text","value":"Other Compile-Time \"Upgrades\""}]},{"type":"element","tag":"h3","props":{"id":"import-directive-support"},"children":[{"type":"text","value":"Import Directive Support"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When compiling the template, we can also see when specific directives are used.\nIf the directive is not globally registered, then we can do an automatic compile-time import of it."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<script>\nexport default {\n  data() {\n    return {\n      bar: 'foo'\n    }\n  }\n}\n</script>\n\n<template>\n  <div>\n    <input v-my-directive=\"bar\">\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      bar"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"v-my-directive"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We could imagine that we could write some code which would inject the directive such as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import MyDirective from \"@/directives/MyDirective\""}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"progressive-images"},"children":[{"type":"text","value":"Progressive Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We hook into the compiling again and replace the source of our images with compile-time low-resolution versions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Input"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<template>\n  <v-img src=\"@/images/my-image\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"v-img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"@/images/my-image"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Output"}]}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<template>\n  <v-img placeholder=\"@/images/my-image-placeholder\" src=\"@/images/my-image\" />\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"v-img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"placeholder"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"@/images/my-image-placeholder"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"@/images/my-image"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"async-imports"},"children":[{"type":"text","value":"Async imports"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/components"}]},{"type":"text","value":" package does offer this functionality as opt-in through a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Lazy"}]},{"type":"text","value":" prefix on the component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It makes use webpack's "},{"type":"element","tag":"a","props":{"href":"https://webpack.js.org/guides/lazy-loading/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Lazy Loading"}]},{"type":"text","value":" which bundles imports as their own dependency.\nThis is useful for if you have heavy components that aren't above the fold."}]},{"type":"element","tag":"h2","props":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vue is already one of the most developer-friendly frontend frameworks around, with continued improvements in the dev experience\nVue will continue to flourish."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While these compile-time upgrades are not needed, they do make life easier. The possibilities\nwith injecting code at compile time opens up many opportunities for reducing the 'chores' that seem to follow us around\nproject to project."}]},{"type":"element","tag":"h2","props":{"id":"thanks-for-reading"},"children":[{"type":"text","value":"Thanks for reading"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"webpack and Vue internals are a challenging topic and if you made it all the way through, pat yourself on the back."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you like the technical side of Vue and Laravel, I'll be posting regular articles on this site. The best\nway to keep up to date is by following me "},{"type":"element","tag":"a","props":{"href":"https://twitter.com/harlan_zw","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"@harlan_zw"}]},{"type":"text","value":" or signing up for the newsletter below."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"why-automatic-component-imports","depth":2,"text":"Why Automatic Component Imports?","children":[{"id":"problem-ui-framework-bloat","depth":3,"text":"Problem: UI Framework Bloat"},{"id":"solution-webpack-optimisations","depth":3,"text":"Solution: webpack Optimisations"}]},{"id":"fundamental-how-does-webpack-load-vue-files","depth":2,"text":"Fundamental: How Does webpack Load Vue Files?","children":[{"id":"vue-loader-in-action","depth":3,"text":"Vue Loader in Action"}]},{"id":"building-an-automatic-component-importer","depth":2,"text":"Building an Automatic Component Importer","children":[{"id":"new-appvue","depth":3,"text":"New App.vue"},{"id":"step-1-modify-the-webpack-configuration","depth":3,"text":"Step 1. Modify the webpack Configuration"},{"id":"step-2-dumb-compile-time-import","depth":3,"text":"Step 2. Dumb Compile-Time Import"},{"id":"step-3-making-it-smart","depth":3,"text":"Step 3. Making it smart"},{"id":"putting-it-all-together","depth":3,"text":"Putting it all together"}]},{"id":"problems-with-automatic-component-imports","depth":2,"text":"Problems With Automatic Component Imports","children":[{"id":"performance-cost","depth":3,"text":"Performance Cost"},{"id":"static-code-only","depth":3,"text":"Static code only"},{"id":"stricter-component-naming","depth":3,"text":"Stricter component naming"}]},{"id":"other-compile-time-upgrades","depth":2,"text":"Other Compile-Time \"Upgrades\"","children":[{"id":"import-directive-support","depth":3,"text":"Import Directive Support"},{"id":"progressive-images","depth":3,"text":"Progressive Images"},{"id":"async-imports","depth":3,"text":"Async imports"}]},{"id":"conclusion","depth":2,"text":"Conclusion"},{"id":"thanks-for-reading","depth":2,"text":"Thanks for reading"}]}},"_type":"markdown","_id":"content:posts:vue-automatic-component-imports.md","_source":"content","_file":"posts/vue-automatic-component-imports.md","_extension":"md","storageMeta":{"atime":"2022-10-06T07:50:32.383Z","mtime":"2022-10-06T07:50:08.483Z","size":18866},"readingMins":8,"path":"/blog/vue-automatic-component-imports","renderer":"post","schemaOrg":{"modifiedAt":"2022-10-06T07:50:08.483Z"},"modifiedAt":"2022-10-06T07:50:08.483Z"}