erztemplerobba Posts - Answer Overflow

erztemplerobba

Explore posts from servers

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

useAppConfig() not exposed to <script setup> in app.vue

I created a plugin /app/plugins/fetchAppSettings.server.ts that fetches my app's settings from the database.

export default defineNuxtPlugin(async nuxtApp => {
  const { data, error } = await fetchAppSettings(supabase)

  if (error) {
    console.error('Error fetching app settings:', error)
    return
  }

  useAppConfig().appSettings = data
  console.log(useAppConfig().appSettings)
})

export default defineNuxtPlugin(async nuxtApp => {
  const { data, error } = await fetchAppSettings(supabase)

  if (error) {
    console.error('Error fetching app settings:', error)
    return
  }

  useAppConfig().appSettings = data
  console.log(useAppConfig().appSettings)
})

This seems to work fine , console.log(useAppConfig().appSettings) logs the settings correctly. Now, I want to use these settings in my app.vue script setup:

<script setup>
const appConfig = useAppConfig();
const appSettings = appConfig.appSettings;

console.log(appSettings)
</script>

<script setup>
const appConfig = useAppConfig();
const appSettings = appConfig.appSettings;

console.log(appSettings)
</script>

This console.log(appSettings) logs the settings correctly server-side but client-side, I just receive an emtpy object. In my nuxt.config.ts, I registered the app settings:

export default defineNuxtConfig({
  appConfig: {
    appSettings: {}
  },
...

export default defineNuxtConfig({
  appConfig: {
    appSettings: {}
  },
...

and I created a app.config.ts file and registered the appSettings there:

export default defineAppConfig({
  appSettings: {}
})

export default defineAppConfig({
  appSettings: {}
})

What am I missing here? Why aren't the appSettings passed to the client correctly? Help would be much appreciated.

1 replies

NNuxt

•Created by erztemplerobba on 6/23/2024 in #❓・help

nuxt/content markdownParser change local options

I use import markdownParser from '@nuxt/content/transformers/markdown' to parse the markdown like this:

  const parseMessage = async (message) => {
  const parsedContent = await markdownParser.parse(null, message.content)
  return { ...message, parsedContent }
}

  const parseMessage = async (message) => {
  const parsedContent = await markdownParser.parse(null, message.content)
  return { ...message, parsedContent }
}

It works well but automatically replaces markdown headings like ### Heading with links+anchortags like this:

<h3 id="test"><a href="#test"><strong>test:</strong></a></h3>

<h3 id="test"><a href="#test"><strong>test:</strong></a></h3>

I want to keep 'normal' header tags without links etc. so I'm looking for an option to change this behavior in my component. If possible, I don't want to disable this functionality globally in my nuxt config because I might need it later in a blog component.

3 replies

NNuxt

•Created by erztemplerobba on 6/9/2024 in #❓・help

Nuxt warning when adding v-if="appReady" to app.vue

My nuxt app is heavily reliant on data that comes from my db and some external sources, so I want to add a spinner/progress component until the necessary data is fetched. Right, now, I'm using this:

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <div v-if="appReady">
      <NuxtPage />
    </div>
    <div v-else>
        <UProgress animation="carousel" color="primary" />
    </div>
  </NuxtLayout>
  <UNotifications />
  <UModals />
</template>

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <div v-if="appReady">
      <NuxtPage />
    </div>
    <div v-else>
        <UProgress animation="carousel" color="primary" />
    </div>
  </NuxtLayout>
  <UNotifications />
  <UModals />
</template>

appReady is simply a ref that gets set to true in my onMounted hook whenever the required data is present. I ran into the problem that nuxt always throws a <NuxtPage> or <NuxtLayout> warning depending on which element I add the v-if="appReady" check to:

check-if-page-unused.js?v=904b885f:11 [nuxt] Your project has pages but the `<NuxtPage />` component has not been used. You might be using the `<RouterView />` component instead, which will not work correctly in Nuxt. You can set `pages: false` in `nuxt.config` if you do not wish to use the Nuxt `vue-router` integration.

check-if-page-unused.js?v=904b885f:11 [nuxt] Your project has pages but the `<NuxtPage />` component has not been used. You might be using the `<RouterView />` component instead, which will not work correctly in Nuxt. You can set `pages: false` in `nuxt.config` if you do not wish to use the Nuxt `vue-router` integration.

I was wondering what is the "correct" way of doing that?

2 replies

NNuxt

•Created by erztemplerobba on 4/4/2023 in #❓・help

Pinia in Nuxt 3 composable error

14 replies

NNuxt

•Created by erztemplerobba on 11/28/2022 in #❓・help

Nuxt 3 with Pinia gives me error 500

57 replies

NNuxt

•Created by erztemplerobba on 11/26/2022 in #❓・help

Nuxt3 feasible with large amount of pages?

I want to build a bigger application with more than 500 pages/articles. Many pages have lots of markup (bold, underlined, ...) as well as relatively complex tables with colored table cells which I want to style with vuetify components + custom css. So far I've only built smaller apps with up to 20-30 pages and fed content via an external API. My question is if a relatively large amount of pages will be make the whole application very slow.

3 replies

Gaming

Programming