use of vue.component in quasar

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

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

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:

I didn’t put it yet into components

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.

Chris11

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

No More Posting New Topics!

use of vue.component in quasar