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

RRailway

•Created by erztemplerobba on 6/3/2023 in #✋｜help

ENOENT Error with puppeteer when creating .pdf

I am using puppeteer in my express server app to create a .pdf file from a html template. It works fine locally and throws this error when I upload the server app to railway. (from railway deploy log):

tempPath /app/create-invoice/temp/invoice_pi_3NERfyItN31KXN7T2Os3CniD.pdf
[Error: ENOENT: no such file or directory, open '/app/create-invoice/temp/invoice_pi_3NERfyItN31KXN7T2Os3CniD.pdf'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/app/create-invoice/temp/invoice_pi_3NERfyItN31KXN7T2Os3CniD.pdf'
}

tempPath /app/create-invoice/temp/invoice_pi_3NERfyItN31KXN7T2Os3CniD.pdf
[Error: ENOENT: no such file or directory, open '/app/create-invoice/temp/invoice_pi_3NERfyItN31KXN7T2Os3CniD.pdf'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/app/create-invoice/temp/invoice_pi_3NERfyItN31KXN7T2Os3CniD.pdf'
}

This is the code that I'm using in my node express server:

    getTemplateHtml().then(async (res) => {
    const template = hb.compile(res, { strict: true });
    const result = template(data);
    const html = result;
    const browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });
    const page = await browser.newPage()
    // set the page content as the generated html by handlebars
    await page.setContent(html)
    //  use pdf function to generate the pdf
    const tempPath = path.join(__dirname, '.', 'temp', 'invoice_' + data.payment_intent + '.pdf')
    console.log('tempPath', tempPath)  
    await page.pdf({ path: tempPath, format: 'A4' })
    await browser.close();
    return true
      }).catch(err => {
        console.error(err)
      });
    }

    getTemplateHtml().then(async (res) => {
    const template = hb.compile(res, { strict: true });
    const result = template(data);
    const html = result;
    const browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });
    const page = await browser.newPage()
    // set the page content as the generated html by handlebars
    await page.setContent(html)
    //  use pdf function to generate the pdf
    const tempPath = path.join(__dirname, '.', 'temp', 'invoice_' + data.payment_intent + '.pdf')
    console.log('tempPath', tempPath)  
    await page.pdf({ path: tempPath, format: 'A4' })
    await browser.close();
    return true
      }).catch(err => {
        console.error(err)
      });
    }

The console.log('tempPath', tempPath) is the first line in the error message. The next line (pdf creation) seems to create the error.:

await page.pdf({ path: tempPath, format: 'A4' })

await page.pdf({ path: tempPath, format: 'A4' })

Help would be much appreciated.

10 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

RRailway

•Created by erztemplerobba on 8/30/2022 in #✋｜help

Strapi database reset after re-deploy

I'm curious if it's working as intended that the Postgres database deletes all custom data and resets to default whenever I deploy my newest Strapi backend from git. If so, is there a workaround to have the database persist?

35 replies

Gaming

Programming