Sagar Kapoor Posts - Answer Overflow

Sagar Kapoor

Posts Comments

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

Gaming

Programming