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

    use of vue.component in quasar

    Help
    2
    5
    1953
    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.
    • C
      Chris11 last edited by Chris11

      Hello,
      I am very new to Quasar.
      I have started a project and so far felt comfortable with the structure.
      Now I’d like to implement the following fiddle into my Index.vue file: https://jsfiddle.net/86216oko/

      In all available Quasar tutorials, I have only seen the use of the “export default” and no sign of “new Vue” or “Vue.component”.

      If I try to implement a new Vue instance, it spits the following error:

      vue-router.esm.js?85f8:2128 ReferenceError: Vue is not defined
          at eval (Index.vue?b484:62)
          at Object../node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib/index.js?!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib/index.js?!./src/pages/Index.vue?vue&type=script&lang=js& (0.js:10)
          at __webpack_require__ (app.js:854)
          at fn (app.js:151)
          at eval (Index.vue?f4bd:1)
          at Module../src/pages/Index.vue?vue&type=script&lang=js& (0.js:68)
          at __webpack_require__ (app.js:854)
          at fn (app.js:151)
          at eval (Index.vue?2d70:1)
          at Module../src/pages/Index.vue (0.js:56)
      

      What am I missing?
      I guess there is probably a way to do set up multiple specific vue instances and vue.components for different divs through export default or somehow use the vue-normal syntax.

      Pretty much the only thing I want to do is to use a vue component in Quasar: https://vuejs.org/v2/guide/components.html

      I also found an approach to do it with the “export default” (https://itnext.io/dynamic-component-creation-in-vue-js-b002bb41aaf4), but this whole thing is still a big question mark for me.

      I’d appreciate any help!

      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @Chris11 last edited by metalsadman

        @Chris11 you dont need a new vue instance, just make a vue file with the fiddle content and import it on your Index.vue. Please head to vue docs first if you havent yet.

        1 Reply Last reply Reply Quote 0
        • C
          Chris11 last edited by Chris11

          @metalsadman thank you for your quick response! I have digged through several documentation and blogs (this one comes close I guess: https://forum.quasar-framework.org/topic/142/adding-a-vue-component/6).

          I followed the instructions. I still throws the same error, after I implemented the following:

          index.vue:

          <template>
                  <div>
                    <q-layout>
                        <q-page-container>
                              <q-page>
                
                                 <div id="el">
                                    <my-component></my-component>
                                 </div>
                
                            </q-page>
                       </q-page-container>
                    </q-layout>
                 </div>
          </template>
          
          <script>
            import fiddle from '../pages/fiddle.vue'
          
            export default {
              component:{
                fiddle
              },
              data(){
                return{
                }
              }
            }
          </script>
          
          

          fiddle.vue:

          <script>  
          
            Vue.component('my-component', {
              template: `
              <div>
                <button @click="process">
                  add(proc
                  ......
                 
                  [the whole fiddle script]
                   .....
                  let ids = ['a_' + this.flag]
                  console.log(ids)
                }
              }
            })  
          
          new Vue({
              el: '#el'
            })
          
          </script>
          
          

          I haven’t touched any other files or did anything global with routes.js.

          here again the fiddle (https://jsfiddle.net/86216oko/) and the error:

          vue-router.esm.js?85f8:2128 ReferenceError: Vue is not defined
              at eval (fiddle.vue?30fd:3)
              at Object../node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib/index.js?!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib/index.js?!./src/pages/fiddle.vue?vue&type=script&lang=js& (0.js:22)
              at __webpack_require__ (app.js:854)
              at fn (app.js:151)
              at eval (fiddle.vue?2f2d:1)
              at Module../src/pages/fiddle.vue?vue&type=script&lang=js& (0.js:128)
              at __webpack_require__ (app.js:854)
              at fn (app.js:151)
              at eval (fiddle.vue?04b4:1)
              at Module../src/pages/fiddle.vue (0.js:116)
          

          here my folder structure:
          cd916b41-e061-47bb-ae13-07d079b15900-image.png

          I didn’t put it yet into components

          metalsadman 1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman @Chris11 last edited by metalsadman

            @Chris11 like I said you don’t need to make another Vue instance just copy the template part and the data same like you see the Vue files example in the docs. You don’t have to copy entire fiddle as is.

            1 Reply Last reply Reply Quote 1
            • C
              Chris11 last edited by

              @metalsadman I was stuck with the “Vue”-naming. Anyway I’ve got it now. A big help to understand how the nesting works without actually mentioning “vue” was this example: https://codesandbox.io/s/o29j95wx9?file=/components/TodoList.vue, if anybody ever visits the this thread with the same starting problem of grasping the concept.

              The actual code for my application looked like:

              Index.vue

              <template>
                  <div id="el">
                     <Fiddle/>
                  </div>
              </template>
              
              <script>
              import Fiddle from '../components/Fiddle.vue'
              export default {
                components: { 
                  Fiddle
                },
                data () {
                  return {
              
                  }
                }
              }
              </script>
              

              Fiddle.vue

              <template>
                <div>
                     <q-btn/> // here all the stuff has to go that previously was in the fiddle in the template section of the vue component 
                 </div>
              </template>
              
              <script> 
              
                export default{
                  props: { //not sure whether this is needed
                    value: {
                      type: String,
                      default: '',
                    }
                  },
                  data () {
                      return {
                         //everything as before
                      } 
                  },
                  methods: {
                  // everything like before
                 }
              }
              
              
              </script>
              
              1 Reply Last reply Reply Quote 0
              • First post
                Last post