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



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

    Scott



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

    Scott



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



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

    Scott


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

    Scott



  • 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
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.