abd
abd
Explore posts from servers
NNuxt
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
NNuxt
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
NNuxt
Created by abd on 8/10/2024 in #❓・help
nuxt/supabase - two tokens showing up in storage
No description
1 replies
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
Created by abd on 8/2/2024 in #❓・help
nuxt/content doesnt allow mixing vue components with markdown?
No description
3 replies
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
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
NNuxt
Created by abd on 4/28/2024 in #❓・help
nuxt/supabase | Multiple GoTrueClient instances detected in the same browser context.
No description
1 replies
NNuxt
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
NNuxt
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