3. adding a vue component

adding a vue component

  • D

    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

    0

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

    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.

    0

  • 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

    0

  • said in adding a vue component:

    componenet
    Typo?
    Francesco

    0

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

    Scott

    1
  • Admin

    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.

    2
    D
     1 Reply
  • D

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

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

    0 1 Reply
  • Admin

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

    0
  • J

    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

    0
  • Admin

    What you did sounds ok.

    0