abd Posts - Answer Overflow

Topics

abd

Explore posts from servers

•Created by abd on 8/16/2024 in #❓・help

Handling large SVGs

Hello, 1. I have a content site that I am startically rendering. 2. I have SVGs that I want to include on certain pages 3. I want to be able to control the sizing of the SVG programmatically based on the screen so my strategy was to create vue components like this for the SVGS

<template>
  <svg :w="w" :h="h" <!--- rest of svg --> </svg>
</template>

<script setup>
const { w, h } = defineProps({
  w: {
    type: Number,
    default: 500,
  },
  h: {
    type: Number,
    default: 500,
  },
});
</script>

<template>
  <svg :w="w" :h="h" <!--- rest of svg --> </svg>
</template>

<script setup>
const { w, h } = defineProps({
  w: {
    type: Number,
    default: 500,
  },
  h: {
    type: Number,
    default: 500,
  },
});
</script>

this worked really well, except because the SVGs are so large the component file is large and I cannot deploy it easily on nuxthub/cloudflare. I was recommended to move to the SVGs to the /public/ folder however this means two things: 1. I need to fetch the SVGs in onmounted, so there is a loading flash when they load 2. I cannot use props to control the sizing of the SVGs according to page logic What is the best strategy for managing large SVGs?

2 replies

•Created by abd on 8/13/2024 in #❓・help

nuxt/content + nuxt/seo ogImages

Hi all, reading the nuxt/seo + nuxt/content integration guide it explains the following

This will only work when you're using Document Driven mode, or you have set a path and are using the useContentHead composable.

This will only work when you're using Document Driven mode, or you have set a path and are using the useContentHead composable.

I am not using the useContentHead composable and actually unsure what this is / how to use it? I have a standard non Document driven integration with nuxt/content and am letting it default handle creating all of the head elements based on the frontmatter. Is there an example of how to integrate custom images with non document driven mode?

1 replies

•Created by abd on 8/10/2024 in #❓・help

nuxt/supabase - two tokens showing up in storage

1 replies

•Created by abd on 8/7/2024 in #❓・help

nuxt/content api calls?

I am checking google search console and see all these urls on my site that are not being indexed. i am using nuxt3 and nuxt/content for some of my content pages. what is this url? I dont understand what kind of request this is: https://mysite.com/api/_content/query/bks3bwxT0H.1720262707368.json?_params=%7B%22first%22:true,%22where%22:%5B%7B%22_path%22:%22%2Fsecurity%2Fresponse%22%7D%5D,%22sort%22:%5B%7B%22_file%22:1,%22$numeric%22:true%7D%5D%7D

7 replies

•Created by abd on 8/6/2024 in #❓・help

How to make a page height = the viewport height

Hi all,

<template>
  <div class="h-full" >
<NuxtLoadingIndicator/>
    <NavBar />
    <NuxtPage />
<MinFooter />
  </div>
</template>

<script setup>
import NavBar from '~/components/NavigationBar.vue'
import MinFooter from '~/components/MinFooter.vue'
</script>

</style>

<template>
  <div class="h-full" >
<NuxtLoadingIndicator/>
    <NavBar />
    <NuxtPage />
<MinFooter />
  </div>
</template>

<script setup>
import NavBar from '~/components/NavigationBar.vue'
import MinFooter from '~/components/MinFooter.vue'
</script>

</style>

I am trying to make it so that my backoffice pages are the exact height of the viewport to give it an 'app like' feel, how can that be achieved?

12 replies

•Created by abd on 8/4/2024 in #❓・help

useFetch && $fetch

hello, I have a page component with a date picker. when the page component loads it is fetching data for the default date today() for the user using usefetch The user can then select a different date to select data for that date. I get this warning in the console Component is already mounted, please use $fetch instead. This is my component code

  const fetchContent = async (newDateRange) => {
    isLoading.value = true
    const { data } = await useFetch("/api/content", {
      method: "POST",
      body: JSON.stringify({
        startDate: newDateRange.start,
        endDate: newDateRange.end,
      }),
    })

    presentContent.value = data.value
    isLoading.value = false
  }

  const fetchContent = async (newDateRange) => {
    isLoading.value = true
    const { data } = await useFetch("/api/content", {
      method: "POST",
      body: JSON.stringify({
        startDate: newDateRange.start,
        endDate: newDateRange.end,
      }),
    })

    presentContent.value = data.value
    isLoading.value = false
  }

What is the correct pattern to use?

6 replies

•Created by abd on 8/3/2024 in #❓・help

tailwind dark mode reactive logo

i am trying to build a pattern where based on the dark mode setting the logo srcset will change. using nuxt in universal mode

<template>
    <NuxtImg fetchpriority="high" decoding="async" style="color: transparent"  :srcset="srcset"
        :alt="alt" :class="imgClass" />
</template>

<script setup>
const { alt, imgClass, height, width } = defineProps({
    alt: String,
    imgClass: String,
    height: String,
    width: String,
})

// Define reactive state for dark mode
const isDarkMode = ref(false);

// Define image source sets
const srcSet = {
  src: "/images/logo.png",
  srcset: "/images/logo.png, /images/logo-2x.png 2x, /images/logo-3x.png 3x",
};

const darkSrcSet = {
  src: "/images/logo-dark.png",
  srcset: "/images/logo-dark.png, /images/logo-dark-2x.png 2x, /images/logo-dark-3x.png 3x",
};

// Update dark mode state on mount
onMounted(() => {
  // Check dark mode preference
  isDarkMode.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
});

// Compute the srcset attribute based on the color scheme
const srcset = computed(() => {
  const set = isDarkMode.value ? darkSrcSet : srcSet;
  return set.srcset;
});
</script>

<template>
    <NuxtImg fetchpriority="high" decoding="async" style="color: transparent"  :srcset="srcset"
        :alt="alt" :class="imgClass" />
</template>

<script setup>
const { alt, imgClass, height, width } = defineProps({
    alt: String,
    imgClass: String,
    height: String,
    width: String,
})

// Define reactive state for dark mode
const isDarkMode = ref(false);

// Define image source sets
const srcSet = {
  src: "/images/logo.png",
  srcset: "/images/logo.png, /images/logo-2x.png 2x, /images/logo-3x.png 3x",
};

const darkSrcSet = {
  src: "/images/logo-dark.png",
  srcset: "/images/logo-dark.png, /images/logo-dark-2x.png 2x, /images/logo-dark-3x.png 3x",
};

// Update dark mode state on mount
onMounted(() => {
  // Check dark mode preference
  isDarkMode.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
});

// Compute the srcset attribute based on the color scheme
const srcset = computed(() => {
  const set = isDarkMode.value ? darkSrcSet : srcSet;
  return set.srcset;
});
</script>

7 replies

•Created by abd on 8/2/2024 in #❓・help

nuxt/content doesnt allow mixing vue components with markdown?

No description

3 replies

•Created by abd on 8/1/2024 in #❓・help

nuxt/content styling

Hello, I am using "@nuxt/content": "^2.12.1", in a nuxt project with taildwindcss. When I use markdown syntax like : # Title none of the typical styling is presented in page. Is this because of tailwind stripping default styling? How does one get styling for markdown in the content module if using tailwind?

3 replies

•Created by abd on 5/23/2024 in #❓・help

Noob question about hydration in SSR

Hi,

<template>
  {{ result }}
</template>

<script setup>
  const result = ref("")
  const callAPI = async () => {
    result.value = await useFetch("/api/Test")
  }
    callAPI()
</script>

<template>
  {{ result }}
</template>

<script setup>
  const result = ref("")
  const callAPI = async () => {
    result.value = await useFetch("/api/Test")
  }
    callAPI()
</script>

this is my page component

export default defineEventHandler(async (event) => {
  return { message: "cool" }
})

export default defineEventHandler(async (event) => {
  return { message: "cool" }
})

this is the api/Test.js why does this cause a hydration missmatch?

5 replies

•Created by abd on 5/23/2024 in #❓・help

Supabase server-routes RLS authentication

Hello, 1. I am using supabase as part of my application 2. I am making all calls to supabase tables from server-side routes 3. I am adding in RLS to each of my tables. From the documentation I read that supabase will automatically send the JWT of the logged in user on CRUD requests to tables to validate the RLS rules. How does this happen if I am using supabase in server-routes where there is no client context?

8 replies

•Created by abd on 5/16/2024 in #❓・help

fetch happening on server-rendering in dev mode but not in production

Hello, General information 1. I am running my app on heroku 2. these are my script commands

    "scripts": {
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare",
        "build": "nuxt build",
        "start": "node .output/server/index.mjs"
    },

    "scripts": {
        "dev": "nuxt dev",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare",
        "build": "nuxt build",
        "start": "node .output/server/index.mjs"
    },

My issue is as follows: 1. I am using useFetch in a page component. 2. When running in local development, the fetch is being called server side and the page is loading with the returned data in NUXT_DATA 3. When running in production however this is not happening. It wont call on serer side (and only calls on client side when doing client side routing) What am I doing wrong here?

1 replies

•Created by abd on 5/16/2024 in #❓・help

nuxt3 <NuxtLink> prefetching behavior

Hello all, Do nuxtlink elements prefetch the content in the background? I know this was a feature in nuxt2 but dont find mention if it in the nuxt3 documentation. Is this the same / related to the new https://github.com/WICG/nav-speculation/blob/main/triggers.md#speculation-rules API that google demo'ed at IO?

1 replies

•Created by abd on 4/28/2024 in #❓・help

nuxt/supabase | Multiple GoTrueClient instances detected in the same browser context.

No description

1 replies

•Created by abd on 5/23/2023 in #❓・help

How to add custom fonts project wide

Can anyone share a nuxt3 sample on adding fonts project wide? Examples I have looked for online dont work

4 replies

•Created by abd on 5/15/2023 in #❓・help

Installation failure

I am running the following series of commands: npx nuxi@latest init <project-name> ✅ cd <project-name> ✅ npm install

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@unhead%2fssr - Not found
npm ERR! 404
npm ERR! 404  '@unhead/ssr@^1.1.26' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2023-05-15T10_01_21_046Z-debug-0.log

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@unhead%2fssr - Not found
npm ERR! 404
npm ERR! 404  '@unhead/ssr@^1.1.26' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2023-05-15T10_01_21_046Z-debug-0.log

Then my directory structure output looks like this:

  public
   .npmrc
   app.vue
   nuxt.config.ts
   package.json
   README.md
   tsconfig.json

  public
   .npmrc
   app.vue
   nuxt.config.ts
   package.json
   README.md
   tsconfig.json

which does not seem correct. I am using : npm : 9.5.1 node: v19.8.1

6 replies