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

  • 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">
          <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>

    In the same Index.vue:

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

    The foo.vue is this:

      <!-- root node required -->
        <!-- your content -->
        <div class="layout-padding">
          <!-- if you want automatic padding -->
    export default {
      data () {
        return {}

    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?

  • Did you use the CLI to scaffold the app first?


  • @s.molinari I thought I did.

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

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


  • 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

  • using linux will generally result in less errors;)

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

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


  • Admin

    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.

  • This post is deleted!

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

  • Look up ES6 modules.


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

Log in to reply