Danny Vogel Comments - Answer Overflow

Danny Vogel

•Created by Danny Vogel on 10/24/2024 in #❓・help

Missing environmental variable causing infinite errors

@kapa.ai I use runtime config and all variables are set to empty strings. The values are loaded through the .env file in local development and via the dockerfile when deployed. I won't be setting fallback/default values. I suppose a plugin that checks all envs are loaded could work.

9 replies

NNuxt

•Created by Danny Vogel on 10/1/2024 in #❓・help

Issue: Initial page load flash before hydration

Took me way too long to find but what finally seems to have resolved it is disabling all third party scripts (cookie yes, recaptcha, google analytics and helpshift). Now to figure out which one exactly caused the issue but for now im super relieved to have found it!

16 replies

NNuxt

•Created by Danny Vogel on 10/1/2024 in #❓・help

Issue: Initial page load flash before hydration

Thanks, i'll see if I can figure out whats going on there and otherwise just continue dumbing down till its solved. Will update if I find anything interesting

16 replies

NNuxt

•Created by Danny Vogel on 10/1/2024 in #❓・help

Issue: Initial page load flash before hydration

that blue line dip is curious but hard to determine what exactly is happening. Its the 'javascript heap'. Again, I could be way off base

16 replies

NNuxt

•Created by Danny Vogel on 10/1/2024 in #❓・help

Issue: Initial page load flash before hydration

16 replies

NNuxt

•Created by Danny Vogel on 10/1/2024 in #❓・help

Issue: Initial page load flash before hydration

yeah, understandable that its hard to pinpoint without a reproduction. Also its mostly evidently only when deployed too. At most we could whitelist your ip for access to the deployed dev environment hehe.

16 replies

NNuxt

•Created by Danny Vogel on 10/1/2024 in #❓・help

Issue: Initial page load flash before hydration

not really, this is a project for work currently only on our dev server and in a private repo. Not sure if trying to create a dummy version would create the same issue. Any recommendations? I can answer as much as you need. Even some general ideas for troubleshooting would be greatly appreciated. Currently im just deleting/disabling various features to see if I can at least locate the issue. We have another, much smaller project that also uses Nuxt with SSR and the issue doesn't occur there. Nor does it happen on my personal projects.

16 replies

NNuxt

•Created by Danny Vogel on 10/1/2024 in #❓・help

Issue: Initial page load flash before hydration

Yes, globally set SSR to false in nuxtConfig and also disabled prerender routes as per @manniL / TheAlexLichter's video in order to fully convert to SPA. This fixed the issue with the flash but is not ideal as we want the SSR benefits.

16 replies

NNuxt

•Created by Zeeeth on 10/1/2024 in #❓・help

Add data to store on Page Refresh

I had the same issue and placed it in a plugin that checks for the token and if it exists, loads the store. Since this is done server-side, the user data is available immediately.

8 replies

NNuxt

•Created by Danny Vogel on 10/1/2024 in #❓・help

Issue: Initial page load flash before hydration

Here is my nuxtConfig for additional context:

// https://nuxt.com/docs/api/configuration/nuxt-config
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineNuxtConfig({
  routeRules: {
    "/user-portal": {
      ssr: false,
    },
    "/auth/login": {
      redirect: "/?auth=true",
    },
    "/auth/signup": {
      redirect: "/?auth=true",
    },
  },
  scripts: {
    globals: {
      cookieyes: {
        src: "https://cdn-cookieyes.com/client_data/xxxxxxxxxxxxxxxxxxxx/script.js",
        id: "cookieyes",
      },
    },
  },
  vite: {
    plugins: [
      nodePolyfills({
        include: ["buffer", "process"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
        protocolImports: false,
      }),
    ],
  },
  modules: [
    "@nuxtjs/tailwindcss",
    "nuxt-headlessui",
    "nuxt-gtag",
    "@nuxtjs/i18n",
    "@nuxt/fonts",
    "@vueuse/nuxt",
    "@pinia/nuxt",
    "nuxt-svgo",
    "@nuxt/icon",
    "@vueform/nuxt",
    "@nuxt/scripts",
  ],
  headlessui: {
    prefix: "Headless",
  },
  devtools: { enabled: true },
  css: [
    "~/assets/css/tailwind.css",
    "~/assets/css/main.css",
    "vue-toastification/dist/index.css",
  ],
  build: { transpile: ["vue-toastification"] },
  tailwindcss: {
    viewer: false,
  },
  fonts: {
    defaults: {
      weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      styles: ["normal", "italic"],
    },
  },
  gtag: {
    id: "",
  },
  icon: {},
  i18n: {
    vueI18n: "./i18n.config.ts",
    locales: [
      {
        code: "en",
        file: "en-US.ts",
      },
    ],
    lazy: true,
    langDir: "locales",
    defaultLocale: "en",
  },

  compatibilityDate: "2024-07-04",
});

// https://nuxt.com/docs/api/configuration/nuxt-config
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineNuxtConfig({
  routeRules: {
    "/user-portal": {
      ssr: false,
    },
    "/auth/login": {
      redirect: "/?auth=true",
    },
    "/auth/signup": {
      redirect: "/?auth=true",
    },
  },
  scripts: {
    globals: {
      cookieyes: {
        src: "https://cdn-cookieyes.com/client_data/xxxxxxxxxxxxxxxxxxxx/script.js",
        id: "cookieyes",
      },
    },
  },
  vite: {
    plugins: [
      nodePolyfills({
        include: ["buffer", "process"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
        protocolImports: false,
      }),
    ],
  },
  modules: [
    "@nuxtjs/tailwindcss",
    "nuxt-headlessui",
    "nuxt-gtag",
    "@nuxtjs/i18n",
    "@nuxt/fonts",
    "@vueuse/nuxt",
    "@pinia/nuxt",
    "nuxt-svgo",
    "@nuxt/icon",
    "@vueform/nuxt",
    "@nuxt/scripts",
  ],
  headlessui: {
    prefix: "Headless",
  },
  devtools: { enabled: true },
  css: [
    "~/assets/css/tailwind.css",
    "~/assets/css/main.css",
    "vue-toastification/dist/index.css",
  ],
  build: { transpile: ["vue-toastification"] },
  tailwindcss: {
    viewer: false,
  },
  fonts: {
    defaults: {
      weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      styles: ["normal", "italic"],
    },
  },
  gtag: {
    id: "",
  },
  icon: {},
  i18n: {
    vueI18n: "./i18n.config.ts",
    locales: [
      {
        code: "en",
        file: "en-US.ts",
      },
    ],
    lazy: true,
    langDir: "locales",
    defaultLocale: "en",
  },

  compatibilityDate: "2024-07-04",
});

16 replies

NNuxt

•Created by MolakDul on 7/30/2024 in #❓・help

Pinia and Nuxt Layouts

I think the issue is merely that the console log happens before the state is populated. Try going to your layout and put

 {{ userStore.photo }}

 {{ userStore.photo }}

in the template section to see if it updates automatically. Or use a watch in your script setup

4 replies

Gaming

Programming