[v1] problem with `prepend/append` icon on input field

[theara]

I base on Meteor JS.
have problem with prepend/append icon on input field

    <q-input
      bottom-slots
      v-model="text"
      label="Label"
      counter
    >
      <template v-slot:prepend>
        <q-icon name="place"/>
      </template>
      <template v-slot:append>
        <q-icon
          name="close"
          @click="text = ''"
          class="cursor-pointer"
        />
      </template>

      <template v-slot:hint>Field hint</template>
    </q-input>

[theara]

My package.json

{
  "name": "meteor-quasar1",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.5",
    "@quasar/extras": "^1.0.0",
    "lodash": "^4.17.11",
    "meteor-node-stubs": "^0.4.1",
    "quasar": "^1.0.0-beta.2",
    "vue": "^2.6.6",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }
}

[s.molinari]

Works fine here: https://codepen.io/smolinari/pen/aXPzbo?editors=1010

Are you sure there isn’t a closing tag or something missing?

Scott

[theara]

Still don’t work (Copy your code)

       <div class="q-pa-md" style="max-width: 300px">
          <q-input
            bottom-slots
            v-model="text"
            label="Label"
          >
            <template v-slot:prepend>
              <q-icon name="place"></q-icon>
            </template>
            <template v-slot:append>
              <q-icon
                name="close"
                @click="text = ''"
                class="cursor-pointer"
              ></q-icon>
            </template>
            <template v-slot:hint>Field hint</template>
          </q-input>
        </div>

[s.molinari]

Well, I was trying to show you your own code works in a Quasar environment (I took the code from your first post). You’ll need to dig deeper in your environment to find out why it isn’t working.

Scott

[theara]

Now I tried install npm install vue-template-compiler --save.
It work fine (I don’t understand???)

[s.molinari]

Me neither.

Scott

[theara]

This is my main.js in Meteor JS

import { Meteor } from 'meteor/meteor'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Vuex from 'vuex'
Vue.use(Vuex)

// App layout
import AppLayout from '/src/layouts/App.vue'

// Quasar globally
import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/dist/quasar.min.css'
import Quasar from 'quasar/dist/quasar.esm.js'
// import Quasar from 'quasar/dist/quasar.umd.min.js'
import langEn from 'quasar/lang/en-us'

Vue.use(Quasar, {
  lang: langEn,
})

// Router
import routes from '/src/routes'
const router = new VueRouter({
  mode: 'history',
  routes,
})

// Store
import createStore from '/src/store'
const store = new Vuex.Store(createStore)

//App start
Meteor.startup(() => {
  new Vue({
    router,
    store,
    render: h => h(AppLayout),
  }).$mount('app')
})

[s.molinari]

@theara - Sorry, but obviously that is out of the scope of Quasar.

Scott

[nothingismagick]

@theara - the core team and volunteer staff don’t maintain the meteor project… you’ll need to rely on the expertise of MWarren here. We have our hands full getting beta to work within in our own environment. This is critical cuz otherwise we just can’t guarantee that it will work elsewhere.