Hi all, this is my unofficial guide on how to use the quasar dotenv extension.

1. Install the quasar app extension:

   $ quasar ext add @quasar/dotenv            

2. Follow the setup instructions, here you’ll specify the names for your production and development .env files ex: dev.env // prod.env

3. Create files in your root directory based on the names specified in step (2)

   // dev.env              

   FOO=bar   

4. You’re all set, you can access these vars in any file via process.env.<var-name>

   // src/components/example.vue         
    
    ...
    mounted() {
      console.log(process.env.FOO)            
    },
    ...

For more information check out:

• Github repo

Why I wrote the post:

• This is very similar to the steps in the github repo but it wasn’t immediatley clear that I had to make new files and how the variables I specified would be accessible in my files.

If anythings missing feel free to correct me below / add to the knowledge of how to use this great framework

I recently ran into an issue where my computer froze and after rebooting I had the following error

 error  in ./src/layouts/MyLayout.vue

Module Error (from ./node_modules/vue-loader/lib/index.js):


Vue packages version mismatch:

- vue@2.6.8
- vue-template-compiler@2.6.7

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.


 @ ./src/router/routes.js 4:11-41
 @ ./src/router/index.js
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js

I fixed it by running:

yarn add vue-template-compiler

I’m not sure how it came about but I’m adding the post in case anyone else runs into this issue

Hi,

see: https://jsfiddle.net/udweq862/

it needs some formatting but should be a start, you can take Date() object and format it as needed

Hi all, I’ve run into the following error a couple of times and thought I’d share a solution in-case anyone else has experienced this issue.

Error message:

events.js:173
      throw er; // Unhandled 'error' event
      ^

  Error: ENOSPC: System limit for number of file watchers reached, watch '/home/<user-name>/vue-apps/twitter/quasar.conf.js'

Solution:

From the command line run the following

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

$ sudo sysctl --system

Alternatively a reboot will fix the issue

For more information please see:

• stackoverflow post

Brilliant extension thanks for the release!

I’ve been using them in conjunction for most projects.

As mentioned above REST is the way to go.

You’d use django-rest-framework as your backend API and Quasar as your frontend and deploy both separately.

If you’re unfamiliar with drf it’s worth getting to grips with Django first before jumping into RESTful APIs. Once your comfortable with Django you’d used drf in order to make API calls from your front end .

For example you can chose to use axios in your quasar app, which in turn would be used to make request to your REST API.

For example axios.get('http://localhost:8000/api/...)

This makes a GET request to your local Django server which returns some information.

Some additional notes:
Django rest is really powerful. Much like Django there are generic views and model “views” (serializers) that make things really easy. There are some great extensions for social auth like django-rest-auth

HI there, great article!

I’ve played around with hellojs and although it is really useful for OAuth2, I’d approach with caution if you are trying to use it for OAuth 1 (for example with providers like twitter)

I also found that for SPAs hellojs may not be the best solution due to the nature of SPA urls i.e.

http://localhost:8000/#/<route>

Typically hellojs would hang as the callback url for OAuth 1 providers leads to no routes as they are:

http://localhost:8000/callback?token=<--------> ....

If anyone has any solution to this it would be great to hear?

Edit
I forgot to mention that using history mode is a good solution to the issue but needs some server side work when deploying.

Hey,

theres an autofocus prop on form components

see the API section:

• https://v1.quasar-framework.org/vue-components/input

3rd prop from the bottom

Hi, you can use the left-label-value and right-label-value props , you can make a computed property and bind it to the label

See: https://jsfiddle.net/15c7qamu/3/

again the date needs some formatting but it should work

Check out the quasar extension dotenv (or the newly released qenv - but I may be mistaken). The way I have this set up is with a dev env and a production env which allows you to use your respective dev or production api.

You can then reference and set your base url in the boot axios file located at src/boot/axios.js via:

  axios.defaults.baseURL = process.env.API;

In my case process.env.API = "http://localhost:8000/api"

If you’re just looking to set the api url just set axios.defaults.baseURL directly

Hey, so have a look at WebRTC

If you want a wrapper around it then take a look at PeerJS (although kind of uncessary but it’ll make prototyping a bit faster)

Then I believe you use a frame or canvas to display the video, the docs have some examples on how to do vid chat .

Use

../statics/img.jpg

Note this depends on how deep in your file tree you are, if your 2 folders deep then you need ../../statics/img.jpg and so on

Your relative file path is wrong. If your using something like VS code , I imagine there’s a way to get the relative path

Nice one! Thanks for sharing, simple & clean source, I’m yet to try it out but looking forward to next weekend

I’d second that, chart js is the way to go, if you’re feeling adventurous give d3.js a spin

I believe Razvan is a vuejs community partner. I’m not sure how much weight that bears on influencing Vue 3 design decisions. I ve also read on the Vue forums that its intended for Vue 3 to be backward compatible, but Quasars pretty huge so who knows how it’s going to be impacted.

Imho, it seems a bit too early for Vue to do a python 2 on the community, it’s just got people on the boat I think pushing them off is a bit counterintuitive in their efforts to grow.

At this point you could just use the app extension to view pdfs found here

I think theres guide on how to contribute to the Quasar framework in the docs / github. A great place to get started with with app extensions.

I’m not too sure what question your asking. If you want to contribute to the project theres some resources on github and the docs. If youre looking to deploy an SPA from a server then you can use something like nginx

Theres a sevrer config in the docs for nginx, you’d run quasar build and then just point it to the file of your build, or copy it over to /www/websites/

Hope this helps but please clarify your question.

There’s a JS wapper to opencv that’s available for use. I haven’t used it yet however based on your needs it might make sense to use a more lightweight solution.

For instance if your doing something with facial recognition, theres stand alone packages that can help.

If your project if heavily dependent on ocv then there’s a package for the android / iOS sdks

For docs in realtion to quasar see the quasar doc page and go from there , it’ll likely take you to the Cordova docs

If your running arch you need to:

Put your phone in development mode (different for each phone so check Google)

Connect your phone to your pc using a package like mtpfs which allows access to phone media

You also need Android studio or at least some of the binaries like adb

Then just develop normally quasar dev -m c and you’ll see an APK / an app installed on your phone which updates in real time based on the changes you make.

If your using a desktop env like gnome you may not need to use mtpfs

I’m on my phone rn but I’ll test tomorrow, but pls let me know how this turns out