No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    adding a vue component

    Help
    5
    12
    15401
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dgk last edited by dgk

      new to quasar and vue

      started with the boilerplate

      quasar init

      If I add new component derived from the quasar component template and then try to add it to main.js without even trying to do anything with the new component or use it in index.vue the rendering of the page (index.vue) fails. No error just a blank page in the browser

      quasar new component test

      like this.

      import Vue from 'vue'
      import Quasar from 'quasar'
      import router from './router'
      
      Vue.use(Quasar) // Install Quasar Framework
      
      import Test from './components/test.vue'
      Vue.componenet('test', Test)
      
      Quasar.start(() => {
        /* eslint-disable no-new */
        new Vue({
          el: '#q-app',
          router,
          render: h => h(require('./App'))
        })
      })
      

      it’s as though the route to index.vue is lost/ignored

      if I comment out

      // import test from './components/test.vue'
      // Vue.componenet('uci-test', test)
      

      no problem index.vue renders

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        I am also just learning, but I don’t believe that is a functional way to implement a component in Quasar. If at all, I believe you’d want to include the component in a page, for instance the “Index.vue” page. Import the component and then declare it as a local component within the page.

        Like this for Index.vue.

        <script>
        var moveForce = 30
        var rotateForce = 40
        
        import Quasar, { Utils } from 'quasar'
        import test from './test.vue'
        
        export default {
         data () {
           return {
             quasarVersion: Quasar.version,
             moveX: 0,
             moveY: 0,
             rotateY: 0,
             rotateX: 0
           }
         },
         components: {
           test: test
         },
        // rest of the code omitted for brevity
        

        Then include the component in the HTML.

        <test></test>
        

        Scott

        1 Reply Last reply Reply Quote 1
        • D
          dgk last edited by dgk

          Yes importing and declaring it locally as you did worked. Thx

          What I was attempting was consistent with this https://www.youtube.com/watch?v=FWQSuskE5UA&index=9&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07
          And if I do the same in an equivalent vue boilerplate it works fine (just like in the video)

          Would be nice to know what Quasar is doing to change the structure of imports and the Vue.component globally. What if I want to load in another component library that I would like to have access to in any other vue component file. I would have to import it locally into each one separately like you did in index.vue?? I assume that adding a component to main.js effectively made it available “globally”.
          Why would quasar not allow this, or is there a slightly different order or syntax. What if I want to derive a bunch of components based on the quasar library and then make them available to any other component (.vue file) I create.

          It’s new years day…:-) maybe a power user or the developer can speak to this later.

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            Actually, I just tested the global method and it worked for me too.

            Did you remember to add the component to a template? It is a stupid question, but it is part of the process of adding a component. 😄

            <test></test>

            Scott

            1 Reply Last reply Reply Quote 0
            • fsgiudice
              fsgiudice last edited by

              said in adding a vue component:

              componenet
              Typo?
              Francesco

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

                @fsgiudice - Oh brother…why didn’t I see that? 😊

                Scott

                1 Reply Last reply Reply Quote 1
                • rstoenescu
                  rstoenescu Admin last edited by

                  Quasar requires knowledge of Vue. There is nothing special in the way components are added to a Quasar app. Everything works just the same as in all Vue apps. You can:

                  • Import and register them globally
                    import test from './test.vue'
                     Vue.component('test', Test)
                    
                  • Keep global “Vue” scope clean and only import your component where you need it (recommended)
                    import Test from './test.vue'
                    export default {
                        ....,
                        components: {
                           Test
                        }
                    }
                    

                  We’re using Webpack2 now, so you might want to go with the second approach to get something out of the tree shaking and keep your App’s loading time as low as possible.

                  D 1 Reply Last reply Reply Quote 2
                  • D
                    dgk last edited by

                    not exactly sure what I changed that made the difference
                    I added a name key to each component and then used a prefix in for each registration, uci, and now it works just like in a standard vue boilerplate. I can add these two html tags into any other component just like you can with q- components.

                    import Vue from 'vue'
                    
                    mport Vue from 'vue'
                    import Quasar from 'quasar'
                    import router from './router'
                    import Test from './components/Test.vue'
                    import Switch from './components/Switch.vue'
                    
                    Vue.use(Quasar) // Install Quasar Framework
                    
                    Vue.component('uci-test', Test)
                    Vue.component('uci-switch', Switch)
                    
                    Quasar.start(() => {
                      /* eslint-disable no-new */
                      new Vue({
                        el: '#q-app',
                        router,
                        render: h => h(require('./App'))
                      })
                    })
                    
                    <uci-test></uci-test>
                    <uci-switch></uci-switch>
                    
                    1 Reply Last reply Reply Quote 0
                    • D
                      dgk @rstoenescu last edited by

                      @rstoenescu
                      Quasar components are in the global scope right? since I can add them to any component template without having to import them and add a components key like did in your second local scope example.

                      It’s not “horrible” to add to global scope if they might be used in any component as long as I use a unique prefix??? (load speed and “tree shaking” aside.)

                      rstoenescu 1 Reply Last reply Reply Quote 0
                      • rstoenescu
                        rstoenescu Admin @dgk last edited by

                        @dgk Quasar comps are registered globally so they won’t drive you nuts writing imports over imports everywhere :))) And indeed it’s not bad to do so with your own components as long as you use them everywhere around your app. One thing to note is that the prefix for your own components is NOT mandatory, as long as you don’t clash with the name of a HTML5 tag.

                        1 Reply Last reply Reply Quote 0
                        • J
                          jesusv last edited by jesusv

                          Hi @rstoenescu I still have a couple of doubts.

                          • Where should I place this new component? I’m placing it under src/components/qMyComponent
                          • I don’t know where to add the code you suggested so I’m importing the component locally in the pages where I need it.
                          <script>
                          import QMyComponent from '../components/mycomponent/QMyComponent'
                          export default {
                            components: {QMyComponent},
                            data () {
                              return {}
                            }
                          }
                          </script>
                          

                          I’m using quasar-framework 0.15.15

                          1 Reply Last reply Reply Quote 0
                          • rstoenescu
                            rstoenescu Admin last edited by

                            What you did sounds ok.

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post