Sagar Kapoor
Sagar Kapoor
PostsComments
NNuxt
Created by Sagar Kapoor on 2/11/2025 in #❓・help
nuxt-umami module not found during typecheck despite being installed
I'm running into an issue with nuxt-umami in my project. When running pnpm lint (which runs nuxt typecheck && eslint .), I'm getting this error: ERROR: Could not load nuxt-umami. Is it installed? However, nuxt-umami is definitely installed in my package.json: 
{
  "dependencies": {
    "nuxt-umami": "^3.1.1"
    // ... other deps
  }
}
{
  "dependencies": {
    "nuxt-umami": "^3.1.1"
    // ... other deps
  }
}
My nuxt.config.ts has the proper configuration: 
export default defineNuxtConfig({
  modules: [
    'nuxt-umami'
  ],
  umami: {
    id: "xxx",
    host: "https://analytics.site.com",
    autoTrack: true
  }
})
export default defineNuxtConfig({
  modules: [
    'nuxt-umami'
  ],
  umami: {
    id: "xxx",
    host: "https://analytics.site.com",
    autoTrack: true
  }
})
Any ideas what might be causing this? The module works fine during development, it's just the typecheck that's failing. Environment: Nuxt 3.15.4 nuxt-umami 3.1.1 pnpm
5 replies
NNuxt
Created by Sagar Kapoor on 12/13/2024 in #❓・help
How can I expose my local dev server to other devices in the same network?
I am not able to access the local dev version on other devices.
4 replies
NNuxt
Created by Sagar Kapoor on 12/13/2024 in #❓・help
Production build is listening on http://[::]:3000 instead of localhost:3000.
How can I fix it?
6 replies
NNuxt
Created by Sagar Kapoor on 11/23/2024 in #❓・help
Accessibility ES Lint plugin with Nuxt3
// @ts-check
import pluginVueA11y from "eslint-plugin-vuejs-accessibility";
import withNuxt from "./.nuxt/eslint.config.mjs";

export default withNuxt(
  {
    ignores: ["**/.nuxt/**/*", "**/node_modules/**/*"],
    rules: {
      "vue/html-self-closing": [
        "warn",
        {
          html: {
            void: "always",
          },},],},},

  pluginVueA11y.configs["flat/recommended"],
  {
    rules: {
      "vuejs-accessibility/alt-text": "error",
      "vuejs-accessibility/anchor-has-content": "error",
      "vuejs-accessibility/click-events-have-key-events": "error",
      "vuejs-accessibility/form-control-has-label": "error",
      "vuejs-accessibility/heading-has-content": "error",
    },},);
// @ts-check
import pluginVueA11y from "eslint-plugin-vuejs-accessibility";
import withNuxt from "./.nuxt/eslint.config.mjs";

export default withNuxt(
  {
    ignores: ["**/.nuxt/**/*", "**/node_modules/**/*"],
    rules: {
      "vue/html-self-closing": [
        "warn",
        {
          html: {
            void: "always",
          },},],},},

  pluginVueA11y.configs["flat/recommended"],
  {
    rules: {
      "vuejs-accessibility/alt-text": "error",
      "vuejs-accessibility/anchor-has-content": "error",
      "vuejs-accessibility/click-events-have-key-events": "error",
      "vuejs-accessibility/form-control-has-label": "error",
      "vuejs-accessibility/heading-has-content": "error",
    },},);
Is this the correct way to use the eslint-plugin-vuejs-a11y ESLint extension in a Nuxt 3 project?
19 replies
NNuxt
Created by Sagar Kapoor on 11/14/2024 in #❓・help
CSS class nomenclature for components and pages
What's the recommended way to structure root element class names in Nuxt 3 components and pages with SCSS? For example, should ProductCard.vue use .product-card and products.vue use .products-page as their root classes?
5 replies
NNuxt
Created by Sagar Kapoor on 11/9/2024 in #❓・help
Does Vercel has issues with NuxtImg?
I am getting this error when I am building my project error: [404] Page not found: /_vercel/image?url=%252Fservices%252Fall-services.webp&w=1536&q=100
5 replies
NNuxt
Created by Sagar Kapoor on 10/30/2024 in #❓・help
Nuxt SiteMap
I am using the Nuxt SEO Module out of box without much configuration (except for the basic one). I am not able to get the dynamic pages indexed on the sitemap. What am I doing wrong?
14 replies
NNuxt
Created by Sagar Kapoor on 10/19/2024 in #❓・help
How to password protect a site?
I want to quickly share a project I made with a client. But I want to password protect it so that it cannot be accessed by anyone else. The site would be up for a very short time so I don't want to mess with Authentication and stuff. I am searching for a very simple solution. Thanks in advance.
3 replies
NNuxt
Created by Sagar Kapoor on 10/2/2024 in #❓・help
Cookie consent banner for Google Analytics
I want to implement a cookie consent banner for a Nuxt3 project, how can I go about it? Do you guys use an external library for this?
3 replies
NNuxt
Created by Sagar Kapoor on 9/6/2024 in #❓・help
Responsive Header Menu
I am working on a responsive menu and this is what I came up with: https://gist.github.com/Sagar-Kap/abdbac1380f76cc36d3297ff9dead1b2 The only thing about this menu that is bugging me out is that I am using this piece of code to change the visibility of the menu buttons: 
watchEffect(() => {
  if (isClient.value) {
    if (mobileNav.value) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }
});
watchEffect(() => {
  if (isClient.value) {
    if (mobileNav.value) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }
});
Is this acceptable in this case? is there a workaround?
3 replies
NNuxt
Created by Sagar Kapoor on 8/25/2024 in #❓・help
Getting error when running ESLint & Prettier"Disallow self-closing on HTML void elements (<img/>)"
I am using ESLint and Prettier in the project and when I try to remove the / and save, it gets restored when I save because of Prettier. How can I fix this issue? Is there a plugin that i have to install which will make it so that ESLint and Prettier will not interfere with each other?
2 replies
NNuxt
Created by Sagar Kapoor on 8/17/2024 in #❓・help
How to dynamically render images in Nuxt3
How do I dynamically render images in Nuxt 3? I want to do something like this: 
<img src=`/assets/icons/${imageName}.svg`>
<img src=`/assets/icons/${imageName}.svg`>
7 replies
NNuxt
Created by Sagar Kapoor on 7/15/2024 in #❓・help
I want to have a logo as a link, how should I go about it?
As the title says, I am trying to embed a link within a logo. What would be the best way to do it? should I use NuxtLink and then some kind of Nuxt Image component?
4 replies