moon-cli qustion

A few days ago I saw a video about vue-cli

here the codes in video:

Message.vue

<template>
  <div>
    <h1>This is Great Message</h1>
    <app-input></app-input>
  </div>
</template>

<script>
  import Input from './component/Input.vue'
  export default {
    components: {
      'app-input': Input
    }
  }
</script>

can we use components: { } for naming the components in moon templates ??

and something i see in video he wrapp all the thing to App.vue insead of index.html

App.vue

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <app-message></app-message>
  </div>
</template>

<script>

export default {
  name: 'app',
  data: function() {
    return {
        message: "this is message"
    }
  }
}
</script>

how can we use App.moon insead of rendering them in HTML file

Main.js

import Vue from 'vue';
import App from './App.vue';
import Message from './Message';

Vue.component('app-message', Message);

new Vue({
  el: '#app',
  render: h => h(App)
})

[kbrsh]

You can use a loop.

const components = ["foo", "bar", "baz"];

for (let i = 0; i < components.length; i++) {
    require("./components/" + components[i] + ".js")(Moon);
}

I’m rewriting v1 and the alpha will be released very soon (around next week). Check out the rewrite branch for my current progress and join the Slack where I regularly post updates.

[kbrsh]

Just require all your component in scripts.js like the default template of Moon CLI does.

require("./components/header.moon")(Moon);
require("./components/footer.moon")(Moon);
require("./components/foo.moon")(Moon);
require("./components/bar.moon")(Moon);

// nothing else is required, you can use header, footer, foo, and bar in any component.