I tried that previously and got some other error, but I just tried it again and it worked. I guess when I tried it before there was some other co-existing config problem.

Anyway, that resolves the problem. Thank you very much for your help!

Yeah, I have some gaps in my knowledge. I’ll do the course because I agree that’s a more efficient path. Thank you again.

Thank you for your reply. I finally got it.

Dear Quasar Gurus,

I’ve studied the Synchronizing with server example. So far, my data populates the table as one giant data dump (over 50,000 rows). This causes the page to freeze for a long time until all the data is loaded. Of course, the way to fix this is to sync the Q-Table pagination logic with some server-side pagination logic, but I’m not quite sure how to do this.

The official Q-Table example with the simulated server logic doesn’t really illustrate the full cycle between server and client. It would be really great if there was a real-world example in Python, PHP or Go that showed how the server-side pagination logic mirrors and feeds the client-side Q-Table pagination logic.

I’ve already written a basic server-side REST API in Go for this app. (Not public yet.) I think I need to create a server-side endpoint that limits the returned results to e.g. 100 rows per page. (I have used this example to create my server-side pagination logic.)

I think I’m very close to understanding this, but there’s still a gap in my understanding that I hope somebody can help me resolve. If nobody has a full server-to-client example to share, then I’ll ask a few questions:

From the Q-Table sync example, there is the following:
this.pagination.page = page

Assuming the following . . .

• 10,000 total results for a particular query, e.g., https://myserver.com?q=myQuery

• 100 results should be displayed per page (so I think that means I should set rowsNumber: 100 and a corresponding end-point param would be added, e.g.: https://myserver.com?q=myQuery&limit=100)

• The initial value of the page object is page: 1

. . . can somebody explain when I would update the page object and what the logic would be based on?

Can somebody show me an example of how the filter prop would work in this example? (It seems like the pagination props are enough. That’s why I’m not sure what filter is for.)

For more background, this is the code I have so far:

<template>
<div>
<q-table
      title="Available Accounts"
      :data="accountTable"
      :columns="accountTableColumns"
      :visible-columns="visibleTableColumns"
      table-class=""
      row-key="AccountID"
      dense
      wrap-cells
      separator="cell"
      :pagination.sync="pagination"
      :loading="tableLoading"
      :filter="filter"
      @request="getAccount"
      no-data-label="This account doesn't have any data to display."
      no-results-label="This account doesn't have any data to display."
    >
// <table rows display fine here, but they are displayed in one giant data dump.>
</q-table>

</div>
</template>

<script>
data () {
    return {
     // Table column props are defined here....
      pagination: {
        page: 1, 
        rowsPerPage: 10, // I think this determines the default number of rows actually displayed, but does not affect the server-side directly.
        sortBy: 'Timestamp',
        descending: true
        rowsNumber: 100 // I think this should be set to the same value as the server-side limit SQL query on the end-point, which limits the rows that Q-Table can fetch when the "Next" / "Previous" buttons are clicked.
      },
      tableLoading: false,
      filter: '' // I'm not sure how filtering works yet, but I think this is part of the query params that are sent to the server.
    }
  },

methods() {
onTableLoad (props) {
// This code block is basically copied from the Q-Table server sync example. I generally understand how this logic works, but I'm still a little fuzzy about how it actually maps to the Next/Previous buttons and the server-side pagination logic.

      const { page, rowsPerPage, sortBy, descending } = props.pagination

      // What exactly does this filter prop do?
      const filter = props.filter

      this.tableLoading = true

      this.pagination.rowsNumber = this.getRowsNumberCount(filter)

      // get all rows if "All" (0) is selected
      const fetchCount = rowsPerPage === 0 ? this.pagination.rowsNumber : rowsPerPage

      // calculate starting row of data
      const startRow = (page - 1) * rowsPerPage

      // fetch data from server: 
      const returnedData = this.fetchFromServer(startRow, fetchCount, filter, sortBy, descending)

      // clear out existing data and add new
      this.data.splice(0, this.data.length, ...returnedData)

      // I think this page object should be incremented or decremented, but I'm not sure exactly when this should occur.
      this.pagination.page = page
      this.pagination.rowsPerPage = rowsPerPage
      this.pagination.sortBy = sortBy
      this.pagination.descending = descending

      // ... turn off loading indicator
      this.tableLoading = false
    }
},

  mounted () {
    // Get initial table data from server (1st page).
    this.getAccount({
      pagination: this.pagination,
      filter: undefined
    })
}

</script>

Dear @metalsadman. Thank you for your reply. At first when I tried your suggestion, I got the error "TypeError: this.$refs.003.show is not a function".

Then I realized that the expansion item is within an array of expansion items. So, targeting it also requires an index number within the array. After I added “0” as the index it worked!

For others who run into this issue, here’s what targeting an array of expansion items should look like:

this.$refs.[yourRef][index].show()

Thanks again!

In some cases, the QPopupEdit box literally crawls across the screen as I type . . . like it has a mind of its own.

Does anybody know what causes that?

The width of the QPopupEdit box seems to be erratic. In some cases, it fills the entire screen width. In other cases, it’s tiny and too small to contain the form value.

In Chrome tools, I can modify the following style and it fixes the problem.

.q-menu.scroll.q-popup-edit {
  min-width: 400px !important
}

But when I add that style to my project’s styles, it has no effect. I’ve also tried deep selectors, which also have no effect.

Does anybody know how to set the min-width on the QPopupEdits?

This should be straight-forward, but for some reason it’s not working. I have an expansion item:

<q-expansion-item :ref='item.id' @click='doStuff(item.id)'>

From my doStuff() method, I have:

this.$refs['003'].expandableItem.show()

The $refs work fine and I can target ref ‘003’ from other functions in my code so I know there’s nothing wrong with the $refs. But when I try to target the expandableItem element to open it programmatically, I get: Cannot read property 'show' of undefined" every time.

Is there another name for expandableItem that I should be targeting or is there some other issue that I’m missing here? Please help.

Thank you all for your feedback!

@metalsadman Your suggestions guided me to the solution I was hoping to find. Now I have all the imports declared in the boot file and it’s easy to access all the functions from any component with this.$Lib1… Thank you!

UPDATE: I was able to successfully import all the functions from my Lib1 module (and its dependencies in Lib2) by simply bypassing the boot files and importing them directly into my Index.vue file like this:

import { func1, func2, func3, func4 . . . funcN} from './Lib1'

After solving a config issue with Babel, I realized the main issue was I needed to import them all by name because there is no default export in Lib1.

So everything works this way now, but is there any significant disadvantage to doing it this way other than the inconvenience of having to import the modules in every page/component that I need them in? In other words, am I missing out on any other significant benefits by importing the modules directly into my pages/components, e.g., tree-shaking, code-splitting, etc.?

Finally, now that we know what the problem was, can somebody please explain how I would apply the named imports to the boot files? So far, I’ve only seen boot file configurations like this . . .

import Lib1 from '../plugins/Lib1.js'

export default async ({ Vue }) => {
Vue.use(Lib1)
};

. . . but what do we do when there is no default export? When I tried to import them in the boot file like I can in the page/component <script> block, it would not compile. So, as soon as I know how named imports would work in the boot files I think I can use the boot files, too, which would be great.

Thank you for your reply.

It seems like the problem is caused because the functions in the module.exports object in the Lib1 file are not being imported properly by Quasar/Vue because the boot loading syntax in my src/boot/Lib1-boot file is not written with the syntax that the Quasar boot process is looking for.

Does anybody understand why the Lib1.js functions are not being imported with the standard export default syntax?

I have a small JS library that was written for Node.JS that I need to import into my Quasar project. The library works fine when bundled into the bundle.js file of a standard Webpack project, but in Chrome I get Lib1-boot.default is not a function (my Quasar boot file) when I try to use the library in my Quasar project.

Here’s my Quasar (Quasar CLI v1.0) setup:

I’ve successfully added many boot files to other projects so I’m familiar with the process. In this case, I’ve created the boot file with quasar new boot 'Lib1-boot'. That file contains the following:

// src/boot/Lib1-boot.js

import Lib1 from '../plugins/Lib1.js'

export default async ({ Vue }) => {
Vue.use(Lib1)
};

I’ve added Lib1-boot to my Quasar.conf boot: [] section with my other boot files (all those boot files, including Axios, work fine). I’ve added import Lib1 from '../plugins/Lib1.js to the top of the <script> block of Index.vue with my other imports. (I use VSCode so it’s easy to see that all my imported files are successfully detected and loaded when I start quasar dev and my app loads fine. )

For context, here’s a simplified version of the code in my Lib1.js file:

// src/plugins/Lib1.js

// import library functions

var pb = require('./Lib2.js'); // A dependency of the Lib1 file in the same directory, which I've also created a `Lib2-boot.js` file for in `src/boot`.

Object.assign(module.exports, Lib2); // I think Quasar/Vue is probably choking on this.

module.exports.createMeParent = function(args) {
    var myFunc = createMe(args);
    return {
        getStuff: function(data) { return myFunc(data, pb.getStuffReq); },

 // lots of other function definitions that should be imported from Lib2  . . . .

In my Index.vue template, when I click the button that’s attached to my myFunction() method (which tries to call getStuff() and other functions exported by Lib1), I can see from the call stack that my method is trying to find the functions in my Lib1.js file, but it’s not finding them because of the Lib1-boot.default is not a function error. So I know I’m calling the function from my method correctly, but it’s simply not finding any of the exported functions in Lib1.js.

I suspect that these import statements in my Lib1 file . . .

// src/plugins/Lib1.js

var pb = require('./Lib2.js');
Object.assign(module.exports, pb);

. . . need to somehow be adapted to the logic of my Lib1-boot file so that all the functions in the module.exports object are recognized and passed to Vue. I understand there’s no default export defined in my lib files, which is probably part of the problem, but my knowledge of Quasar boot files (and Node.JS syntax) doesn’t go beyond the examples that I’ve seen in the docs and various forum posts; so I’m not sure how to resolve the default export issue in this case. Rewriting the entire Lib1.js and Lib2.js files doesn’t seem like it should be necessary.

As I’ve been troubleshooting, I noticed that some libraries (e.g., Axios) are imported into Quasar with a different export default syntax using Vue.prototype... instead of Vue.use, e.g.:

export default async ({ Vue }) => {
  Vue.prototype.$axios = axios
}

So I tried using the same Vue.prototype.$Lib1 = Lib1 syntax, but that didn’t help.

I’ve spent a long time troubleshooting this. I think I’m close to resolving it, but I need some help please on how to properly import all the Lib1.js functions into my Quasar project. Please help!