My first vue component (using quasar) shows nothing in the browser

[rjansen]

I am making my first vue app (using Quasar). The Index.vue import my foo.vue compoment. And then I place a <foo> tag inside the template of Index.vue like this:

 ...<div class="layout-view">
        foo
        <foo></foo>
        bar
      <div class="logo-container non-selectable no-pointer-events">
        <div class="logo" :style="position">
          <img src="~assets/quasar-logo.png">
          <p class="caption text-center">
            <span class="desktop-only">Move your mouse.</span>
            <span class="touch-only">Touch screen and move.</span>
          </p>
        </div>
      </div>
    </div>...

In the same Index.vue:

...
<script>
    import { Utils } from 'quasar'
    import { Foo } from './foo.vue'
    ...
    components: {
        Foo
    }
}
</script>

The foo.vue is this:

<template>
  <!-- root node required -->
  <div>
    <!-- your content -->
    FOO
    <div class="layout-padding">
      <!-- if you want automatic padding -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style>
</style>

I expect to see ‘FOO’ between ‘foo’ and ‘bar’ but there isn’t, there is ony ‘foo bar’. The build went well, no errors. What am I missing here?

[s.molinari]

Did you use the CLI to scaffold the app first?

Scott

[rjansen]

@s.molinari I thought I did.

[Max]

looks good so far! you must have something broken in your build setup

[s.molinari]

I’ve recreated your scenario and it works fine for me, both with the dev server and serving up the /dist build.

So, Max is probably right. You’re going to have to check your setup in general.

Scott

[rjansen]

I have started over again, this time on a Linux machine (instead of Windows). Now I’m sure I used the quasar-cli to setup the app and run a dev server, exactly as the tutorial says. I also made a component (“quasar new component foo”). Still no ‘FOO’. But I’m not have made a build yet, I run the dev server right now (“quasar dev”).

The error (seen it before but forgot to post, sorry):

[Vue warn]: Unknown custom element: <foo> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

found in

—> <Index> at /home/richard/jonathanapp/src/components/Index.vue
<App> at /home/richard/jonathanapp/src/App.vue
<Root>

[Max]

using linux will generally result in less errors;)

can you show us your code again? component? main.js? including compoent…

[s.molinari]

Try also import Foo from 'components/foo.vue'

Scott

[rstoenescu]

import { Foo } from './foo.vue' is wrong. It should be import Foo from './foo.vue'. You are trying to import the default export, not a named export from a component.

[rjansen]

This post is deleted!

[rjansen]

@rstoenescu and @s-molinari This works! Thanks. So now I need to understand what te difference is, I will find that out.

[s.molinari]

Look up ES6 modules.

Scott

[didymus]

I had the same issue, the importing with {} implies explicit modules within the JS document. While, including the name of the modules assumes it’s the name of the default module. import Foo from './foo.vue' for example Foo must be the default member of ```foo.vue``

I’m simply explaining this to reinforce my own learning and understanding of JS modules. I’ve been working with Javascript for a long time and I still forget.