2 years ago

#66088

test-img

JK2018

Some of Quasar's styles not loading

I have added the Quasar plugin onto an existing Vuejs project. The problem I am experiencing is that when I use Quasar components, it seems that some of it's styling does not work.

Will provide pics at the bottom of the page.

In my main.js I use Quasar :

projectAuth.onAuthStateChanged(()=>{
    if(!app){
        app = createApp(App).use(Quasar, quasarUserOptions).use(store).use(router).mount('#app')
    }
})

quasarUserOptions:

import './styles/quasar.sass'
import '@quasar/extras/material-icons/material-icons.css'

// To be used on app.use(Quasar, { ... })
export default {
  config: {},
  plugins: {
  }
}

and finally the component in which I wish to use a Quasar component:

<template>
<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <q-select
      filled
      hide-bottom-space
      options-dense
      hide-dropdown-icon
      v-model="model"
      use-input
      clearable
      multiple
      input-debounce="500"
      :options="filterOptions"
      @filter="filterFn"
      style="width: 200px"
      counter
      hint="Selected items"        
      label="Actors"
      dense
      hide-selected
    ></q-select>
  </div>
</div>
<template/>


<script >
import {ref} from 'vue'
export default {
setup(){
 
    const stringOptions = ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle']
    const filterOptions = ref(stringOptions)
    const model = ref(null)

    const filterFn = (val, update) => {
        update(() => {
          if (val === '') {
            filterOptions.value = stringOptions
          }
          else {
            const needle = val.toLowerCase()
            filterOptions.value = stringOptions.filter(
              v => v.toLowerCase().indexOf(needle) > -1
            )
          }
        })
      }

    return {filterFn, model, filterOptions, stringOptions}
    }
}
</script>


<style scoped>
</style>

The following img is what It is supposed to look like and how it displays in codepen :

enter image description here

The following img is what It looks like in my vuejs app :

enter image description here

Both images aren't at the same scale but that is not the problem.

Any advice will be very appreciated

vue.js

quasar-framework

0 Answers

Your Answer

Accepted video resources