In Nuxt2 there were connection checkers
https://nuxtjs.org/docs/concepts/context-helpers/#connection-checker
You could do the following this.$nuxt.isOffline
Is there a way to do this with Nuxt3?
I tried looking at useNuxt() to see of there was some info in there but do not see anything.
My question was also asked on Github discussions: https://github.com/nuxt/framework/discussions/4996
Vue's ecosystem is more used with Composition API approach in mind nowadays, hence everything is a bit more decoupled overall.
VueUse's useOnline is de-facto the best approach overall.
Install it with yarn add #vueuse/core and you'll be able to use it right off
<script setup>
import { useOnline } from '#vueuse/core'
const online = useOnline()
</script>
<template>
<p>Is my website online? {{ online }}</p>
</template>
Using Chrome, you can emulate an offline connection and see that the Boolean properly switches to false.
Credits to manniL on Discord as a reminder for that one, I totally forgot about useOnline().
Related
Question 1:
In my router.beforeEach there're some API which call many times, so I want to use useQuery to cache those API. But I caught an error that `useQuery's only used in < setup script />.
So how do we deal with this issue?
Question 2:
What is the different between queryClient and useQuery hook? Which and when we use queryClient?
Sorry, I couldn't find any good explanation in docs.
Thank you guys so much for supporting.
I hope you are fine. I want to send a get request in nuxt3 without using composition api but I don't know how to do that. I will thank anyone who give me a piece of guidance.
Thanks.
async getPosters(){
const results = await this.$axios.get('posters')
this.posters = results.data
},
Write your code as you were used too with just Options API, nothing have changed on that matter.
You can totally use Options API while using Vue3/Nuxt3. They may have some small changes but nothing too major for a simple task of querying a backend.
It looks like this is more of an issue with trying to load Axios rather than it is with the composition API. Nuxt 3 makes Axios a redundant module.
Since Fetch is the go-to considered method of requesting data in Nuxt3, have you tried changing the method of your request? It means having to load one less module for your project, and will make it a lot easier to transition between SSR and Static in the future. If not, it might be worth using the previous version of Nuxt.
Here's the documentation: https://v3.nuxtjs.org/getting-started/data-fetching in Nuxt 3.
When we add the products into Cart and proceed to Checkout page we can apply the coupon like this.
It shows unnecessary error in the console.
I checked the template/pages/checkout.html but it has this code.
{{{ checkout.checkout_content }}}
How can I update the {{{ checkout.checkout_content }}} and where is it?
and I also can't find the proper JS code in assets/js.
What I guess is this HTML section/js code is dynamically loaded from Bigcommerce API but I can't verify it.
How can I solve my issue?
Have you tried running on localhost instead of 127.0.0.1, to see if makes any difference?
This is a good situation to get a HAR file, as that would show your network tab details. If you have one, it may be best (and more secure) to reach out to technical support team to review it with you rather than sharing it in StackOverflow. Also, in regards to your question about { checkout.checkout_content } -to modify this, you will need to take a look at the checkout-js repo as it's not available via the theme.
I have created a single page app using vue.js. I need to track my logged in users in google analytics. I can do this by sending a User-ID variable back to google analytics. I have done this before by simply setting the variable and sending it back to google analytics.
This time I am using Vue.js and for my analytics and I am using a very nice plug in MatteoGabriele/vue-analytics.
My problem is I don't know how or where to set my User-ID variable in my code.
Have been trying to figure out the same question, and from closed issues 79, and 178, this looks like the suggested method.
this.$ga.set('userId', 123456)
You need to install vue-analytics first,
run npm install vue-analytics
then, in your app.js or main.js import vueAnalytics
import VueAnalytics from 'vue-analytics';
and then,
Vue.use(VueAnalytics, {
id: 'UA-xxxxxxxxx-x', router
});
Remember to replace the 'UA-xxxxxxxxx-x' with your Tracking ID.
for better understanding use the vue-analytics documentation
I have Vue template that that should send some data to server. I would like to move it in separate vue instance. Like:
var authorization = new Vue({
//
})
Would it be good practice to place some data binding from new component with data from template?
I create app and decided to put in it auth (declarated in template). Is it's good?
What is the best way to put some sub-apps-modules in Vue App?
I know this is a pretty old question, but if I understand you right, you wan´t a seperate app to comunicate with the server, so with your database?
If that is the case, then you should just work with an API which includes services you can call from your app with Axios.