Writing multiple components in one file is a pattern from React where some files contain multiple components. Some of those components are “private” to the file/exported component since no other component needs to consume them. Here’s Swizec complaining about it: Since I don’t have the full code for the above, we’re just going to use the default “Hello World” component from a project scaffolded using as an example. vue-cli By default there are two files, one for and one for (at and ). takes a prop and renders it. App HelloWorld src/App.vue components/HelloWorld.vue HelloWorld msg To write these in a single file, using React it might look something like this: const HelloWorld = ({ msg }) => (<div><h1>Hello world</h1><div>{msg}</div></div>); const App = () => (<div id="app"><HelloWorld msg="Welcome to Your React App" /></div>); export default App; Since React is “Just ” you can have multiple component definitions in one file, not export some of them (just to keep the exported component DRY). JavaScript In , it’s still possible, but it’s a tiny bit more complicated since there is more than one way to achieve this: Vue Examples repo at . github.com/HugoDF/vue-multiple-components-in-sfc Using a render function <template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App"/></div></template><script>// inline componentconst HelloWorld = {props: ['msg'],render(h) {return h('div', [h('h1', 'Hello world'),h('div', this.msg)])}};export default {name: 'app',components: {HelloWorld}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style> Using Vue.component and a template <template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App"/></div></template><script>import Vue from 'vue';// inline component with template string 👍const HelloWorld = Vue.component('hello-world', {props: ['msg'],template: `<div><h1>Hello world</h1><div>{{ this.msg }}</div></div>`});export default {name: 'app',components: {HelloWorld}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style> Does this work if the runtime isn’t included? NOPE [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. found in ---> <HelloWorld> <App> <Root> Thankfully, we can fix it using a build with the template compiler (see Pretty much, create (if it doesn’t exist) and add: https://code.luasoftware.com/tutorials/vuejs/vue-cli-3-include-runtime-compiler/): vue.config.js module.exports = {runtimeCompiler: true}; As pointed out in the linked article, this adds the Vue template compiler to your bundle… which is around 10KB. Restart the dev server: : npm run serve Using a template and no Vue.component <template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App"/></div></template><script>// inline component with template string 👍const HelloWorld = {props: ['msg'],template: `<div><h1>Hello world</h1><div>{{ this.msg }}</div></div>`};export default {name: 'app',components: {HelloWorld}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style> Still works (if we have the right with enabled): vue.config.js runtimeCompiler Since I don’t have the full code for the above, w# Using JSX (compiled to render functions) We can rewrite our initial example of a render function with JSX: : App.js <template><div id="app"><HelloWorld msg="Welcome to Your Vue.js App"/></div></template><script>// inline component with JSXconst HelloWorld = {props: ['msg'],render() {return (<div><h1>Hello world</h1><div>{this.msg}</div></div>);}}; export default {name: 'app',components: {HelloWorld}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style> Vue CLI 3+ If you use Vue-cli greater or equal to version 3.0 you are in luck as JSX is supported. https://scotch.io/tutorials/using-jsx-with-vue-and-why-you-should-care Vue CLI < 3.0 You’ll need to dig around and have a look at . babel-plugin-transform-vue-jsx I will probably involve installing the following packages: npm install\babel-plugin-syntax-jsx\babel-plugin-transform-vue-jsx\babel-helper-vue-jsx-merge-props\babel-preset-env\--save-dev Again examples repo at . github.com/HugoDF/vue-multiple-components-in-sfc Feel free to tweet at me . @hugo__df Get all the posts of the week before anyone else in your inbox Originally published at codewithhugo.com on September 27, 2018.
