I went with adding a boot file. I also had to make changes to the Vuex store directory to make the store available to the boot file.

I made changes to the vuex index.js file located in the store folder.

src\store\index.js

import Vue from "vue";
import Vuex from "vuex";
import devices from "./devices";
import channels from "./channels";
import settings from "./settings";
import recordings from "./recordings";
import video from "./video";
import guide from "./guide"
import schedule from "./schedule"
Vue.use(Vuex);

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */
let store = null //added
export default function ({ store/*store, ssrContext  */ }) {  //modified
  const Store = new Vuex.Store({
    modules: {
      devices,
      channels,
      settings,
      recordings,
      video,
      guide,
      schedule
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  });
  store = Store   // added
  return Store;
}

Then in the boot directory I added a file called init.js.

src\boot\init.js

// import something here

// "async" is optional;

export default async ({ app, router, Vue, store }) => {
  console.info('boot: init entered', store)
  await store.dispatch('settings/getNPVRConfig')
  console.info('boot: init exited')
}

I am like to change the size and color of the prop markers in the Form Component: Range. I was not able to find styling for the makers in the API. Can this be done?

Thanks.

I went with adding a boot file. I also had to make changes to the Vuex store directory to make the store available to the boot file.

I made changes to the vuex index.js file located in the store folder.

src\store\index.js

import Vue from "vue";
import Vuex from "vuex";
import devices from "./devices";
import channels from "./channels";
import settings from "./settings";
import recordings from "./recordings";
import video from "./video";
import guide from "./guide"
import schedule from "./schedule"
Vue.use(Vuex);

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */
let store = null //added
export default function ({ store/*store, ssrContext  */ }) {  //modified
  const Store = new Vuex.Store({
    modules: {
      devices,
      channels,
      settings,
      recordings,
      video,
      guide,
      schedule
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  });
  store = Store   // added
  return Store;
}

Then in the boot directory I added a file called init.js.

src\boot\init.js

// import something here

// "async" is optional;

export default async ({ app, router, Vue, store }) => {
  console.info('boot: init entered', store)
  await store.dispatch('settings/getNPVRConfig')
  console.info('boot: init exited')
}

This has been in beta a while. Any kind of time frame when I could use it in production. I would like to avoid the vue-apollo and @apollo/client route in my new app.

When my app starts, I need to populate my Vuex store from my backend serve with some configuration data. What is the “best practice” for doing this? I will be calling a Vuex action to get the data from the server.

Should I do it in a boot file located in the boot folder? In the store/index.js file? Use a life cycle hook(created) in the App.vue file? Some other recommend method?

Thanks.

ON the online Quasar Doc site, left side drawer, under Vue Components => Form Components => Date Picker => With QInput. The example input is 2019/02/01 which validates to true. The docs says the default modal format is YYYY/MM/DD.

Try entering 2019/02/32 validates true. Incorrect February has at most 29 days
try entering 2019/02/40 validates false. Correct.
Try entering 2019/13/01 validates true. Incorrect. Only 12 months in a year
Try entering 2019/21/01 validates false. Correct

The Template shows :rules="[‘date’]". Is there a better built-in, internal rules validation that will do a better job of validating dates?

Thanks