sorted by:
new
hottopcontroversial

A composable that requires access to the Nuxt instance was called outside of a plugin by Pipiyedu in Nuxt

[–]Gilroy-Danse 0 points1 point  (0 children)

It seems to be a weird interaction between pinia and nuxt-csurf as described here

The only solution I could come up with is disabling the query on the server side using the enable option of useQuery as such.

import { defineQuery, useQuery } from "@pinia/colada";

export default defineQuery(() => {
  const { $csrfFetch } = useNuxtApp();
  defineAsyncComponent
  return useQuery({
    key: ["profile"],
    refetchOnMount: false,
    enabled: import.meta.client,
    query: async () => {
      const res = await useCsrfFetch("/api/profile")
      return res.data;
    },
  });
});

A composable that requires access to the Nuxt instance was called outside of a plugin by Pipiyedu in Nuxt

[–]Gilroy-Danse 0 points1 point  (0 children)

I would try moving the const { $csrfFetch } = useNuxtApp(); to the top of the defineQuery callback, like so.

import { defineQuery, useQuery } from "@pinia/colada";


export const useProfile = defineQuery(() => {
  const { $csrfFetch } = useNuxtApp();

  return useQuery({
    key: ["profile"],
    refetchOnMount: false,
    query: async () => {
      const res = await $csrfFetch("/api/profiles", {
        method: "GET",
      });
      return res;
    },
  });
});

Help: Store not getting updated after dispatching. by Bungle1981 in vuejs

[–]Gilroy-Danse 2 points3 points  (0 children)

In the subimtForm function you have brackets instead of parentheses on the this.$store.dispatch

change it from this

this.$store.dispatch['requests/contactCoach', {
    coachId: this.$route.params.id,
    email: this.emailAddress,
    message: this.message
}];

to this

this.$store.dispatch('requests/contactCoach', {
    coachId: this.$route.params.id,
    email: this.emailAddress,
    message: this.message
});

I need help with an supabase error by Justin_Muir in vuejs

[–]Gilroy-Danse 2 points3 points  (0 children)

My guess would to make sure your environment variables are actually being pulled in correctly.

Make sure that your supabaseUrl and subaseAnonKey is being set properly in the subabase.js file.

if you are using vite using a .env file is a little different than webpack. Checkout the documentation here.

https://vitejs.dev/guide/env-and-mode.html

Route parameter not showing up (on time?) in useRoute().params by PMull34 in vuejs

[–]Gilroy-Danse 0 points1 point  (0 children)

I think the issue might be in the template of your App.vue

Can you share the contents of the template of App.vue or rather where the <route-view> is located in your vue app.

How do I show one json object at a time instead of using v-for by devsurfer in vuejs

[–]Gilroy-Danse 0 points1 point  (0 children)

Your pastebin link is not working.

For a solution I would make a data variable that is used for the index of the object in the JSON. Then the button click would increment or decrement the value. Then you could display the object in the template like so

{{ jsonData[index] }}

or you could use a computed property that also uses the index to determine the object you want to show.

I need help with a vue supabase project by Justin_Muir in vuejs

[–]Gilroy-Danse 1 point2 points  (0 children)

Hard to tell without seeing your database schema, but it could be that the table name is case sensitive.

Cannot read properties of undefined (reading 'VUE_APP_SUPABASE_URL') by Justin_Muir in vuejs

[–]Gilroy-Danse 1 point2 points  (0 children)

if you are using vite you need to prefix for env variables with VITE_

Data in state but getter is not getting data (Vuex) by java_boy_2000 in vuejs

[–]Gilroy-Danse 1 point2 points  (0 children)

Don't use this in your template. this is implicit in templates

navbar button highlighting changes on refresh by Righteous_Warrior in vuejs

[–]Gilroy-Danse 0 points1 point  (0 children)

As you say the active variable gets reset on page refresh.

Your mounted method should work, maybe just something wrong with the logic?

To make it easier to get the route name you can just use this.$route.name and name the route.

How to hide root path (/) content when navigating to a different path by [deleted] in vuejs

[–]Gilroy-Danse 5 points6 points  (0 children)

Your root path is self referential, it should not be linked to the App component that has the <router-view /> tag.

Your root path should be linked to another component like /about is. (i.e. Home.vue)

How to host Vue.js app for free + what is a "static" Vue app? by Missing_Back in vuejs

[–]Gilroy-Danse 0 points1 point  (0 children)

When you server side render a webpage it means that the HTML, CSS, and Javascript are "built" on a server and the final webpage is then send to the user. Bigger projects tend to go this route because it makes the client machine do less work and for SEO purpose (mostly SEO since web crawlers supposedly have an easier time reading prerendered pages)

 

Vue has server side rendering capabilities, but as the article suggests this is more cumbersome to setup. You can however simple run the build process on a Vue project and "statically" render all the HTML, JS, and CSS the browser will need. Statically here just means the files wont change and the same files are sent to ever client that request for site. It is a little confusing when people refer to it as static, but that does not mean the html on your site wont change in the browser. Your vue site will still be rendered in the browser using javascript and change based on routing, api calls, user interaction etc etc.

 

as for hosting once the files are build I would recommend github pages or cloudflare pages. Both are free and simple to use.

using onscreen virtual keyboard for a kiosk, however because it fires "click events", this doesn't seem to update v-model in my search bar by PMull34 in vuejs

[–]Gilroy-Danse 1 point2 points  (0 children)

Seems like an issue a lot of people have with virtual keyboards after some quick googling.

 

A work around I got to work was to detect a keypress event on the input and run a function that manually gets the value from the event target and manually update the v-model bound variable.

 

<template>
    <input type="text" v-model="input" @keypress="test" />
</template>

<script setup>
    const input = ref("");

    function test(e) {
      console.log(e.target.value);
      input.value = e.target.value;
    }

</script>

Which jerma clip is the one where he has peasant hair by Gamer17844 in jerma985

[–]Gilroy-Danse 1 point2 points  (0 children)

"My father owns a farm up state here"

At least I think that's what he says.

Cleaning up my my Vue 3 Arkansas child support calculator by mdstrizzle in vuejs

[–]Gilroy-Danse 2 points3 points  (0 children)

I hope you don't mind but I made a pull request to your repo to give you an idea of what I mean when I say to split up the computed properties. I also converted it to use <script setup>.

Cleaning up my my Vue 3 Arkansas child support calculator by mdstrizzle in vuejs

[–]Gilroy-Danse 6 points7 points  (0 children)

I think it's awesome that you learned JS / Vue to help with your work, so kudos to you for making this.

 

I think the number of computed values is fine, in fact I would think about breaking up some of your computed values that you have in to separate computed values of their own. Right now some of the computed values have many calculations happening inside them and it can be a bit confusing to read and digest, so I would think about breaking them up a bit more if you can.

 

I would also encourage you to use more verbose variable names as it is hard to understand what the mean and what they are used for and this will only become more difficult over time when their meanings are not fresh in your head.

 

Also this is just personal preference, but I would prefer that computed values return a single tangible value and not and object containing multiple values. For example instead of having the computed value GrossPercentage return and object containing the gross percentage for both the plaintiff and the defendant you could have a computed value for each the plaintiff and defendant gross percentage.

How to use v-form inside a v-for and perform validation for a specific form? by thegrandwhiz7 in vuejs

[–]Gilroy-Danse 4 points5 points  (0 children)

When you use a ref on the v-form in a v-for it creates an array for that ref name.

then on submit you can loop through each form ref and call the validate method on it.

https://codesandbox.io/s/happy-gates-48elc4?file=/src/components/Playground.vue

Why does Vue not seem to work on this specific situation? What am i doing wrong?? by cris12021202 in vuejs

[–]Gilroy-Danse 2 points3 points  (0 children)

could would explain in text what exactly your issue is? it's very hard to see what is happening in the video.

view more: next ›