RicharDVD Posts - Answer Overflow

RicharDVD

•Created by RicharDVD on 9/24/2024 in #❓・help

Auto import not working inside template

I have an issue where certain auto imports like vue utilities (like toValue for example) aren't available in between the template tag but only in the script tag. Also some of my own functions which I have inside the utils folder aren't auto imported if I use it in between the template tags. Is this to be expected? I thought it worked fine before Vue Language Server V2

1 replies

NNuxt

•Created by RicharDVD on 9/16/2024 in #❓・help

Pinia state leaks across browser sessions

I have a pretty severe issue where data stored in Pinia is sometimes leaked across requests. I have a store that is persisted in cookies using the @pinia-plugin-persistedstate package. The state of this is sometimes set across all users so all users have the same pinia data. Even though their cookies are empty, when looking at

__NUXT__.pinia

__NUXT__.pinia

the state is set to that of another user. Any idea's how this can accur?

54 replies

NNuxt

•Created by RicharDVD on 9/9/2024 in #❓・help

Query parameter as default value of ref

2 replies

NNuxt

•Created by RicharDVD on 8/27/2024 in #❓・help

Multiple pixels using Nuxt Scripts

We are currently working with a external marketing team that asks from us to also setup their google tag (and meta) tag on our website. I currently have something like this in the app.vue file:

useScriptGoogleAnalytics({
  key: 'gtag1',
  id: 'G-0987654321',
})
useScriptGoogleAnalytics({
  key: 'gtag2',
  id: 'G-1234567890',
})

useScriptGoogleAnalytics({
  key: 'gtag1',
  id: 'G-0987654321',
})
useScriptGoogleAnalytics({
  key: 'gtag2',
  id: 'G-1234567890',
})

I can see that they are both installed and I can send custom events to either one of these but the automatic pageview event is only send to one gtag id. I would however like to automatically send the pageview events to both tags. How can I achieve this? Thanks in advance!

5 replies

NNuxt

•Created by RicharDVD on 8/20/2024 in #❓・help

Embeddable components

Hello, I would like to make a component in my app embeddable to other websites. I would like for the interface to look something like this:

<div id="my-custom-component" prop="hi"></div>
<!-- OR -->
<my-custom-component prop="hi"></my-custom-component>

<script src="mydomain.com/js/my-custom-component.js">

<div id="my-custom-component" prop="hi"></div>
<!-- OR -->
<my-custom-component prop="hi"></my-custom-component>

<script src="mydomain.com/js/my-custom-component.js">

It would be great to have this within the same codebase as my nuxt 3 application. What would be the best way to achieve this?

4 replies

NNuxt

•Created by RicharDVD on 3/5/2024 in #❓・help

Check inside plugin if running in dev mode

I have created a plugin that sends nuxt/vue errors using some hooks to Sentry. I do however not want to send these errors if I started the server in dev mode. What is the best way to check if I'm in dev move inside my plugin? (I do have both a regular Nuxt (client) plugin and a Nitro plugin). Is using environment variables the best way to check in this case?

1 replies

NNuxt

•Created by RicharDVD on 2/26/2024 in #❓・help

Check if error page has loaded

Hi all, I'm currently implementing the Sentry report dialog modal. I have a client plugin that initializes and configures Sentry. In here I have configured that the report dialog will be shown if there is an exception before sending the event to Sentry. It works fine but it now shows it on all errors (even silent ones). I would want it to only show when the error page is loaded. How can I check in a client plugin if the error page has loaded? My basic setup is like the following:

export default defineNuxtPlugin((nuxtApp) => {
  ...
  Sentry.init({
    ...,
    integrations: [
      Sentry.feedbackIntegration({
        ....
      });
    ],
    beforeSend(event) {
      // I would also like to check if error page has loaded
      if(event.exception && event.event_id) {
        Sentry.showReportDialog({
          eventId: event.event_id
          .....
        })
      }
      return event;
    }
  })
});

export default defineNuxtPlugin((nuxtApp) => {
  ...
  Sentry.init({
    ...,
    integrations: [
      Sentry.feedbackIntegration({
        ....
      });
    ],
    beforeSend(event) {
      // I would also like to check if error page has loaded
      if(event.exception && event.event_id) {
        Sentry.showReportDialog({
          eventId: event.event_id
          .....
        })
      }
      return event;
    }
  })
});

1 replies

Gaming

Programming