To disable the text input field without disabling the whole component I ended up doing this to my component.
in the html tag I put
@keydown="ignore()"
ref="chip"
then in methods add an ignore method
ignore () { this.$refs.chip.blur() },
still would be nice to have disable only disable the text field not the whole component.
for those facing this issue just better go check all your icons here. They tell you which one (fab,fas,far) goes with the icon and since the FA upgrade some of your former icon names may be gone
https://fontawesome.com/icons?d=gallery
ok really not clear what needs to be done from you upgrade instructions.
What needs to be done is preface all fa icon classes with fab or fas or far
and not JUST fab necessarily as that stands for branded icons only.
As to which one guess you have try till it works… so not so trivial anymore.
check this FA page out.
https://fontawesome.com/get-started/svg-with-js
to where you sent me not grokking what to change??
No longer use the extras key in config file?
change these somehow?
<q-item-side icon="fa-save" />
how is quasar supposed to know that fa- means fontawesome and how does icon font get loaded now?
extras: [
ctx.theme.mat ? 'roboto-font' : null,
'material-icons',
'fontawesome'
// 'ionicons',
// 'mdi',
],
All was fine with .15.x. But now fontawesome icons no longer being found (trashes the rendering). Maybe quasar extras issue so I scrubbed node_modules and resintalled all dependencies but the problem persists. It does find the default material icons. I don’t use the other two.
First and last entry use material icons all the rest in menu using fa icons.
<q-list-header>System Configuration</q-list-header>
<q-item to="/config/hardware">
<q-item-side icon="settings" />
<q-item-main label="Hardware" sublabel="Real-time Controlled Hardware" />
</q-item>
<q-item to="/config/switches">
<q-item-side icon="fa-toggle-on" />
<q-item-main label="Switches" sublabel="Physical and Virtual" />
</q-item>
<q-item to="/config/circuits">
<q-item-side icon="fa-lightbulb-o" />
<q-item-main label="Circuits" sublabel="Lights/Outlets" />
</q-item>
<q-item to="/config/security">
<q-item-side icon="fa-tablet" />
<q-item-main label="Security" sublabel="grant access to system" />
</q-item>
<q-item to="/config/backup" >
<q-item-side icon="fa-save" />
<q-item-main label="Backup" sublabel="commit or restore configurations" />
</q-item>
<q-item to="/config" >
<q-item-side icon="fa-info-circle" />
<q-item-main label="Help" sublabel="info on configuring system" />
</q-item>
<q-item to="/home">
<q-item-side icon="home" />
<q-item-main label="Home" sublabel="return to main" />
</q-item>
</q-list>
</q-layout-drawer>
Operating System Linux(4.13.0-32-generic) - linux/x64
NodeJs 10.3.0
Global packages
NPM 6.1.0
yarn 1.7.0
quasar-cli Not installed
vue-cli Not installed
cordova Not installed
Important local packages
quasar-cli 0.16.4 (Quasar Framework CLI)
quasar-framework 0.16.0 (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
quasar-extras 2.0.2 (Quasar Framework fonts, icons and i18n.)
vue 2.5.16 (Reactive, component-oriented view layer for modern web interfaces.)
vue-router 3.0.1 (Official router for Vue.js 2)
vuex 3.0.1 (state management for Vue.js)
electron Not installed
electron-packager Not installed
electron-builder Not installed
@babel/core 7.0.0-beta.49 (Babel compiler core.)
webpack 4.9.1 (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support l
oaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
webpack-dev-server 3.1.4 (Serves a webpack app. Updates the browser on changes.)
workbox-webpack-plugin 3.2.0 (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)
@nothingismagick yea I know about discord although my experience of trying to use discord to get help with other projects is not that great. Depends on who is online and it’s not really great for sharing details of your issue. I prefer the async forum posts as long as I can get some help in a day or two and plus a forum post lives on in benefit to others.
@rstoenescu
To encourage folks to joint/donate via patreon why don’t use say that if you are a patreon donor of >=$x then you can expect to receive a reply on the forum in 1-2 days. Lately several things I need feedback on have no replies. It’s not like you won’t respond to other just no guarantees. That would be all the motivation I need to get going on patreon.
Nothing bad about this idea. We all need $$ to eat and you need to get paid for all your efforts including responding to forum posts which you have done kindly in the past.
had to do this with your suggestion
export { ws }
but the warning still continues.
FYI I imported my custom websocket module directory into my .vue page and it works fine. Clearly nothing to do with my code itself.
==========================
Ok so if I try your axios example from the guide page verbatuim I get the same warning
17:235-240 "export 'axios' was not found in 'quasar'
so this really has nothing to do with my plugin. Either I am doing something wrong or something changed in .16? that was not documented. Capital or lower case in plugins prop or file name makes no difference. Is latest version of webpack missing bundling this??
First I yarn added axios to my package.json node_modules
then
in src/plugins I have axios.js with code from your guide.
import axios from 'axios'
export default ({ Vue }) => {
// we add it to Vue prototype
// so we can reference it in Vue files
// without the need to import axios
Vue.prototype.$axios = axios
// Example: this.$axios will reference Axios now so you don't need stuff like vue-axios
}
here is my config file. Note I did start this a a clean new .16 project not as an upgrade from .15x
// Configuration for your app
module.exports = function (ctx) {
return {
// app plugins (/src/plugins)
plugins: [
],
css: [
'app.styl'
],
extras: [
ctx.theme.mat ? 'roboto-font' : null,
'material-icons',
ctx.theme.ios ? 'ionicons' : null
// 'mdi',
// 'fontawesome'
],
supportIE: false,
build: {
scopeHoisting: true,
vueRouterMode: 'history',
// vueCompiler: true,
// gzip: true,
// analyze: true,
// extractCSS: false,
extendWebpack (cfg) {
cfg.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules|quasar)/
})
}
},
devServer: {
// https: true,
// port: 8080,
open: true // opens browser window automatically
},
// framework: 'all' --- includes everything; for dev only!
framework: {
components: [
'QLayout',
'QLayoutHeader',
'QLayoutDrawer',
'QPageContainer',
'QPage',
'QToolbar',
'QToolbarTitle',
'QBtn',
'QIcon',
'QList',
'QListHeader',
'QItem',
'QItemMain',
'QItemSide',
'QInput',
'QField'
],
directives: [
'Ripple'
],
// Quasar plugins
plugins: [
'Notify',
'axios'
],
iconSet: ctx.theme.mat ? 'material-icons' : 'ionicons'
},
// animations: 'all' --- includes all animations
animations: [
],
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {},
manifest: {
// name: 'Quasar App',
// short_name: 'Quasar-PWA',
// description: 'Best PWA App in town!',
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3',
icons: [
{
'src': 'statics/icons/icon-128x128.png',
'sizes': '128x128',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-192x192.png',
'sizes': '192x192',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-256x256.png',
'sizes': '256x256',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-384x384.png',
'sizes': '384x384',
'type': 'image/png'
},
{
'src': 'statics/icons/icon-512x512.png',
'sizes': '512x512',
'type': 'image/png'
}
]
}
},
cordova: {
// id: 'org.cordova.quasar.app'
},
electron: {
// bundler: 'builder', // or 'packager'
extendWebpack (cfg) {
// do something with Electron process Webpack cfg
},
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Window only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
// appId: 'quasar-app'
}
}
}
}
I followed the docs for custom plugin
in my /src/plugin folder I have a file Socket.js with this content
// import WebSocket from '@uci/websocket-client'
import WebSocket from '../../uci-websocket-client/browser-client'
// leave the export, even if you don't use it
export default ({ Vue }) => {
let url = process.env.WSS || 'ws://0.0.0.0:8090'
const ws = new WebSocket(url)
Vue.prototype.$socket = ws
}
I then have 'Socket' in the plugins section of the config file but I get
17:221-227 "export 'Socket' was not found in 'quasar'
no manner of fiddling with names get’s me by this error. Am I not supposed to use the default export like in the axios example?
I have custom component I wrote (source is below). It makes use of lodash.find. 'lodash.find` is been added by yarn to package.json.
When I use it directly on a page I have no issue. But went it’s used within another custom component (which happens to be rendered in script instead of using a template) I get a webpack error saying lodash_find is undefined. This seems more a webpack “bug” because clearly the component functions fine in this context using lodash_find without error.
Clearly this issue is not with the component itself but when I am using it within another. Am I missing some kind of additional registration here?? Isn’t a component’s imports/dependencies self-contained? A wrapping component does not need to know about these??? All that needs be be done is to assure that the component’s dependency is in package.json and is installed in node_modules. I really do need to get rid of this console error even it if doesn’t seem to affect the function of the component. The stack trace goes on for multiple screenfuls which I didn’t bother to share but you can imagin how super irritating it is and makes it impossible to do any other debugging using the console.
[Vue warn]: Error in render: "TypeError: __WEBPACK_IMPORTED_MODULE_0_lodash_find___default(...)(...) is undefined"
found in
---> <QChipsOptionGroup> at src/components/ChipsOptionGroup.vue
<QField>
<QForm> at src/components/Form.vue
<QSlideTransition>
<QCollapsible>
<QFormc> at src/components/CollapsibleForm.vue
<QList>
<Switches> at src/pages/config/Switches.vue
<QPageContainer>
<QLayout>
<LayoutDefault> at src/layouts/default.vue
<Root>
vue.runtime.esm.js:587
TypeError: __WEBPACK_IMPORTED_MODULE_0_lodash_find___default(...)(...) is undefined
the chip options group custom component
<template>
<div>
<q-chips-input
v-model="names"
v-bind:show="show"
@input="update()"
@change="update()"
float-label='click down Arrow for list of circuits'
:before="[
{
icon: 'arrow drop down circle',
handler() {
show = !show
}
}
]"
/>
<q-option-group
v-show="show"
color="secondary"
type="checkbox"
v-model="selected"
@input="update()"
@change="update()"
:options="options"
inline="inline"
/>
</div>
</template>
<script>
import find from 'lodash.find'
export default {
data () {
return {
show: false,
selected: []
}
},
props: [ 'value', 'options', 'inline' ],
computed: {
names: {
get: function () {
// console.log('get', this.selected)
return this.selected.map(option => {
return find(this.options, function (o) { return o.value === option }).label
})
},
set: function (updated) {
// console.log('set', this.names, updated, this.selected)
this.selected.find((sel) => {
let label = find(this.options, function (o) { return o.value === sel }).label
// console.log('loop', sel, label)
if (updated.indexOf(label) === -1) {
this.selected = this.selected.filter(item => item !== sel)
return true
}
})
}
}
},
methods: {
update () {
// console.log('updating', this.selected)
this.$emit('input', this.selected)
}
},
beforeMount () {
this.selected = this.value
// console.log(this.selected)
}
}
</script>
<style lang="stylus">
@import '~variables'
.on
background $positive
.off
background grey
</style>
here is the rendered component that embeds the chips options component. You see it’s registered there in case it is used (in this case yes)
<script>
// import makeFieldProps from '../helpers/makeFieldProps.js'
import QChipsOptionGroup from 'src/components/ChipsOptionGroup.vue'
export default {
data () {
return {
}
},
render (element) {
return element('form', {}, this.makeForm(element))
},
components: {
QChipsOptionGroup
},
props: ['values', 'schema'],
methods: {
makeForm (element) {
let form = []
// console.log('formm values', this.values)
// console.log('form schema', this.schema)
for (let key in this.schema) {
// console.log('form schema key on render', key)
if (this.schema[key].fieldType !== 'hidden') {
let field =
element('q-field', {
props: {
label: this.schema[key].fieldProps.label,
helper: this.schema[key].fieldProps.helper
}
}, [
element(this.schema[key].fieldType ? `q-${this.schema[key].fieldType}` : 'q-input', {
props: this.fieldProps(this.values[key], this.schema[key]),
on: {
input: (value) => {
// this.values[key] = value
// console.log('input changed', key, value)
this.$emit('changed', { name: key, value: value })
}
}
}),
this.tooltip(this.schema[key].fieldProps.tip, element)
]
)// end field element
form.push(field)
} // skip for hidden
// console.log('field', key, field)
}// end form field loop
// console.log('the form object', form)
return form
},
fieldProps (value, field) {
let props = field.fieldProps // quasar compenent props here
// let props = makeFieldProps[ field.fieldType ? field.fieldType : 'input' ](field)
// console.log('props after processing', props)
props.value = value
return props
},
tooltip (tip, e) {
if (tip) {
return e('q-tooltip', {}, [ tip ])
} else {
return null
}
}
},
mounted () {
}
}
</script>
<style lang="stylus">
@import '~variables'
</style>