moon-cli qustion

[sadeghbarati]

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]

1. All components are registered globally so you cannot declare them like that.
2. Just have the template of the root instance be <div><App/></div>.

[sadeghbarati]

have question about 1:

I have components like

header.moon
.
.
footer.moon

and

Home.moon for include require("./components/header.moon")(Moon); top components in it

Moon.moon Root file new Moon

u say i don't need to include components in child component like Home.moon

and u say include them all in Moon.moon root file ?

so you say components are registered global and don't require components in child file and require or import them in one in Root file am I get ur means right?

sry for ask this question many times ...

[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.

[sadeghbarati]

require works but :

1- two component like header and footer require in Root moon,
and use component name tag in index.html

const Moon = require("moonjs");
require("./components/header.moon")(Moon);
require("./components/footer.moon")(Moon);

new Moon({
  el: "#app"
});

<div id="app">
   <div>
        <header content="moon"></header>
   </div>

   <div>
       <footer></footer>
   </div>
</div>

when moon refresh localhost tab just one component will be rendered like header

console error :

• t.moon or t is not defined
• n.moon or n is not defined

---

found my 1- problem in #130
but why u don't include best solution of github issue in the documentation ?!

lowercase ====> UPPERCASE component name or use name option in cli export

---

2- how to use MoonRouter in seprate file or in Root file
npm install moon-router --save
const MoonRouter = require....

[kbrsh]

In HTML, tags are automatically turned into lowercase before the JavaScript is even executed — this makes it impossible for Moon to detect capital letters in component names unless the template is passed in the template option.

You create a router using new MoonRouter() and export it. In scripts.js you can then require("router.js") and pass it to new Moon({ router }).

[sadeghbarati]

and cuz we use es5 we must export router like this ?

//need to include moon js in router or just import MoonRouter?
// Moon.use(MoonRouter) in router.js or scripts.js (root file)?
const Moon = require("moonjs");
const MoonRouter = require("moon-router");

const router = new MoonRouter({

});
module.exports = router;

[sadeghbarati]

if we have many many components we must require them in root file ?

that's so bad look this example:

require("./components/Header.moon")(Moon);
require("./components/Footer.moon")(Moon);
require("./components/Card.moon")(Moon);
require("./components/Sidebar.moon")(Moon);
require("./components/Articles.moon")(Moon);
require("./components/NavBar.moon")(Moon);
require("./components/Home.moon")(Moon);
require("./components/Contact.moon")(Moon);
,
.
.
.

//infinity Require for components just for example...

new Moon({
  el: "#app"
});

require all of them into another file.js and require this on root file ? can we ?

any solution for this @kbrsh ?

[sadeghbarati]

another question about moon update to version 1

when v1 will be release ?
what v1 is improvement ?
what is v1 features ?
and when we have better documentation 🤣 👍

tnx @kbrsh

[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.