You guys could have saved me a lot of time earlier today! Really glad to have found this thread, and the most helpful example by s.molinari with CodePen implementation (which includes the settings for Quasar). Thanks a bunch - I feel like you’ve more than made up my wasted time today.

@s-molinari Scott - thanks for your reply. I’ll mull over and get back in the coming days. Best wishes with m8a.

I returned to this task and got it running: npm module MSSQL allows Node.js access to SQL Server and in my case Azure SQL. However, Quasar Electron did not run, although non-Quasar Electron did. MSSQL uses one of two drivers: tedious (default) or msnodesqlv8. Not getting tedious to work I tried msnodesqlv8, noting in the doco for mssql one must specify this with var sql = require(‘mssql/msnodesqlv8’). However, this generated a different error that something was built with wrong npm version (whatever) but in researching msnodesqlv8 doco it said for use with Electron one should run npm module electron-rebuild (see its doco for how to run, not straightforward). But ultimately it is working. So: 1) use mssql, 2) specify use of msnodesqlv8, 3) run electron-rebuild and hopefully your Quasar Electron App can talk to Azure SQL.

A convienient although inelegant way to achieve your objective is to select a file in the desired folder and derive folder from the path element returned:
<!-- select folder by getting file and derive folder -->
<div class=“q-pa-sm”>
<q-file v-model=“mypathobj”
label=“Select a file in the desired Directory”
filled
@input=“gotInput”
style=“max-width: 400px”
/>
</div>

gotInput: function() {
  this.mypath = this.mypathobj.path.replace(this.mypathobj.name, '')
  console.log("Folder Path: ", this.mypath)
},

@metalsadman Thanks! Once again, careful reading of the docs can save a lot of time.

By trial and error this seems to be working (let me know if not and I will revise this post): (It would be nice to have a few examples in Q-Table docs. It may be standard CSS but it is not always clear when CSS parameters apply and when they do not. Q-Table is a great display mechanism.)
style: “max-width: 500px; min-width: 500px”

Quasar Upgrade MSSQL fails FIXED (Inegalantly): Working on a new program, I had MSSQL working but I when upgraded Quasar, the problem re-appeared, and it caused an older program that was working to no longer compile with the same errors. I’ve upgraded NPM, VS Build tools, reinstalled MSSQL, tedious and msnodesqlv8 modules; ran electron-rebuild. Two modes of failure, below. Non-Quasar Electron program using MSSQL still works, so problem is definitely introduced by Quasar. Sam
Two methods, each with different error message:
import sql from ‘mssql’ <using default driver tedious> gets webpack_require is not a function
import sql from ‘mssql/msnodesqlv8’ gets "specified module could not be found: node_modules\msnodesquv8\build\Release/ec1\0188…node
Ahah (Ugh): By trial and error I got it to work with the following Webpack theatrics, including null-loader. If anyone can figure out what is the right way to do this I would like to know and hopefully others can use Quasar Electron MSSQL (and Azure SQL): <7/2: I ended up using msnodesqlv8 rather than default tedious, as for some reason I could not get the connection to complete. Other settings that may or may not matter: bundler: ‘builder’ and target: ‘electron-renderer’ )
// https://quasar.dev/quasar-cli/handling-webpack
extendWebpack (cfg) {
cfg.module.rules.push({
enforce: ‘pre’,
test: /.(js|vue)$/,
loader: ‘eslint-loader’,
exclude: /node_modules/
})
cfg.externals = {
mssql: “require(‘mssql’)”,
tedious: “require(‘tedious’)”,
msnodesqlv8: “require(‘msnodesqlv8’)” // added 7/2
}
cfg.module.rules.push({
test: /.node$/,
use: ‘node-loader’
})
cfg.target = ‘electron-renderer’
// 7/1/20 trying this see
cfg.module.rules.push({
test: /.mssql$/,
loader: ‘null-loader’
})
cfg.module.rules.push({
test: /(tedious)/,
loader: ‘null-loader’
})
}

Sorry, no solution, but a related question: How can the file picker default folder be set to something other than __dirname? I have not been able to find an answer in the doco or Forum. This requirement would seem to be common, so including an example in the file picker documentation where the default folder is set would be appreciated.

@dobbel Thanks! I have added ‘’’ to the text, but it is not producing the effect you are showing. Any further steps needed to make it work?

You may find this helpful:
https://forum.quasar-framework.org/topic/6088/globally-hide-or-show-left-drawer-on-mainlayout-page
Globally Hide or Show Left Drawer on MainLayout Page

Objective: Hide or show the Home Page left drawer globally from components no matter how deeply nested the component is. Searching the web and the Forum for a solution took quite a while and did not end with a solution, although hints were made by some. The solution presented here is pretty basic, but it seems to me that this requirement would exist so broadly that a somewhat standard solution using the Vuex store, with minimal change to the Quasar create template, would be a good idea. Basically set up leftDrawerOpen as a global state variable. Steps are below:
In Vuex, define the following (I would suggest st, mu, ac and gt as prefixes for state, mutation, action, getter):
stLeftDrawerOpen in Vuex state
muLeftDrawerOpen as mutation to commit the value
acLeftDrawerOpen as action to set it with some logic (see below) to either toggle the drawer or set hide or shown
gtLeftDrawerOpen as getter

Then in MainLayout.vue change:
<q-drawer :width="250" v-model="leftDrawerOpen" bordered content-class="bg-grey-w">
To
<q-drawer :width="250" v-model="gtLeftDrawerOpen" bordered content-class="bg-grey-w">

In data: remove this from the Quasar created file:
leftDrawerOpen: this.$q.platform.is.desktop,

Instead, add a step in MainLayout.vue mounted:
const dwr = (this.$q.platform.is.desktop) ? ‘on’ : ‘off’
this.acSetLeftDrawerOpen(dwr)

Change the MainLayout.vue code for the three-bar icon:
<q-toolbar>
<q-btn flat round dense icon="menu" @click="leftDrawerOpen = !leftDrawerOpen" />
to point the click operation to the Vuex action:
<q-btn flat round dense icon="menu" @click="acSetLeftDrawerOpen('')" />

Vuex action code:
acSetLeftDrawerOpen( {commit}, obj) {
// Contol the home page left drawer - obj = '' toggle, 'on'/'off' to show/hide
let newState = true
if (obj === 'on') {
newState = true
} else if (obj === 'off') {
newState = false
} else {
newState = !state.stLeftDrawerOpen
}
commit('muSetLeftDrawerOpen', newState)
},

Thanks for pointing this link out; I have read that but will re-read as I often overlook some details that will explain how to do what is needed. It looks like the node may be set selectable even if no ticks are involved. However, the nodes are built up with a v-for routine, and how to set leaves selectable but parents non-selectable is not clear.

Amon - Thanks from Michigan! I got my watch watching by reference to your github code.