Hendrik Jan Posts - Answer Overflow

Hendrik Jan

Posts Comments

NNuxt

•Created by Hendrik Jan on 7/2/2024 in #❓・help

Error "currentRenderingInstance is null" since upgrade of Nuxt

5 replies

NNuxt

•Created by Hendrik Jan on 6/24/2024 in #❓・help

How can I import a markdown file from /assets?

I've got a markdown file named "CHANGELOG.md" in my /assets folder that I want to import using typescript. * I added declare module "*.md"; to global.d.ts so Typescript will accept it in imports. * I've added import changelog from '~/assets/CHANGELOG.md'; to my file /pages/changelog.vue. * I've added vite: { assetsInclude: ['**/*.md'] } to my nuxt.config.js. This gives me the following error:

Loading module from “https://tapp.docker.dev/_nuxt/assets/CHANGELOG.md?import” was blocked because of a disallowed MIME type (“text/html”)

I also tried to get this working using CodeSandbox or Stackblitz, but they fail already when I add the change to nuxt.config.js: https://stackblitz.com/edit/github-zjjjbk?file=nuxt.config.ts How can I use .md files from my assets folder?

1 replies

NNuxt

•Created by Hendrik Jan on 6/3/2024 in #❓・help

What path to use, to read a file from public folder?

The "dev" public folder is in another location than the "build" public folder. Using filesystem tools, how can you access these files in a way that works both in "dev" and in "prod"? I currently use this:

const isBuild = import.meta.url.includes('.output');
const staticPath = isBuild ? '../public' : '../../static';

legalFilePath = decodeURI(
    new URL(
        staticPath + '/legaltexts/' + v.AppointmentPosition.Appointment.legal_filename,
        import.meta.url
    ).pathname
);

const fileFound = existsSync(legalFilePath);

const isBuild = import.meta.url.includes('.output');
const staticPath = isBuild ? '../public' : '../../static';

legalFilePath = decodeURI(
    new URL(
        staticPath + '/legaltexts/' + v.AppointmentPosition.Appointment.legal_filename,
        import.meta.url
    ).pathname
);

const fileFound = existsSync(legalFilePath);

In nuxt.config.js we use the legacy "static" folder instead of "public" for historical reasons:

dir: {
    public: 'static'
},

dir: {
    public: 'static'
},

This does work, but it feels like a hack. Is there a clean way to generate a file path to the public folder that works both in "dev" and in "build"?

1 replies

NNuxt

•Created by Hendrik Jan on 5/27/2024 in #❓・help

How to configure "~" alias when working with Docker?

3 replies

NNuxt

•Created by Hendrik Jan on 4/4/2024 in #❓・help

Way to catch errors in all composables?

Hi people, Is there a way to catch errors in any of your composables (client side)? I know that I can use <NuxtErrorBoundary> to catch errors in any component, but this does not catch errors in a composable. I also tried nuxtApp.hook('vue:error', ... in a plugin, which does catch some errors, but not in composables.

1 replies

NNuxt

•Created by Hendrik Jan on 4/2/2024 in #❓・help

Getting error "Component is already mounted" when using "useFetch()" and changing route.

I am getting the error in my console:

[nuxt] [useFetch] Component is already mounted, please use $fetch instead.

[nuxt] [useFetch] Component is already mounted, please use $fetch instead.

This is when using multiple useFetch() in a composable and then navigating to another route. A reproduction can be found here: https://stackblitz.com/edit/github-o9ivmk-bcdf3h?file=layouts%2Fdefault.vue I'm quite sure it has to do with the composable useTwoStepFetch() but unsure how to solve. I cannot change useFetch() to $fetch, because I want the call to be deduped. Any ideas?

1 replies

NNuxt

•Created by Hendrik Jan on 3/31/2024 in #❓・help

Can you use useFetch twice in one composable, once on server, once in client?

I am trying to use useFetch() once on the server and a second time in the client, in one composable. So far I have not been able to get this to work. A reproduction of my attempt can be found here: https://stackblitz.com/edit/github-o9ivmk?file=composables%2FuseTwoStepFetch.ts It is the second useFetch() with server:false that I cannot get to return something -- it always returns null. Is there a way to get this working? An example somewhere? The composable looks like this:

// Simplified example.
// Fetch data in two steps:
// 1. Quickly get a small number of records (3)
// 2. Get all the rest of the data
export async function useTwoStepFetch() {
  const nuxtApp = useNuxtApp();
  const result = ref([] as any[]);

  // get the first 3 records
  // use useFetch() so this call can be done on the server
  const body1 = { take: 3 };
  await nuxtApp.runWithContext(async () => {
    const { data }: any = await useFetch('/api/hello', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: body1,
      watch: false,
      server: true,
      lazy: false,
    });

    // Put data in the result
    console.log('data.value (1)', data.value);
    result.value = data.value;
  });

  // get the rest of the data
  // ** HERE I WANT TO BE SURE THAT IT RUNS ONLY ON CLIENT **
  const body2 = { skip: 3 };
  // ** NO AWAIT BECAUSE WE WANT TO RETURN THE RESULT BEFORE THE CALL FINISHED **
  nuxtApp.runWithContext(async () => {
    const { data }: any = await useFetch('/api/hello', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: body2,
      watch: false,
      /* server:true, lazy:false works, but that is not what I want */
      server: false,
      lazy: true,
    });

    console.log('data.value (2)', data.value);
    result.value.splice(result.value.length, 0, ...(data.value || []));
  });

  return result;
}

// Simplified example.
// Fetch data in two steps:
// 1. Quickly get a small number of records (3)
// 2. Get all the rest of the data
export async function useTwoStepFetch() {
  const nuxtApp = useNuxtApp();
  const result = ref([] as any[]);

  // get the first 3 records
  // use useFetch() so this call can be done on the server
  const body1 = { take: 3 };
  await nuxtApp.runWithContext(async () => {
    const { data }: any = await useFetch('/api/hello', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: body1,
      watch: false,
      server: true,
      lazy: false,
    });

    // Put data in the result
    console.log('data.value (1)', data.value);
    result.value = data.value;
  });

  // get the rest of the data
  // ** HERE I WANT TO BE SURE THAT IT RUNS ONLY ON CLIENT **
  const body2 = { skip: 3 };
  // ** NO AWAIT BECAUSE WE WANT TO RETURN THE RESULT BEFORE THE CALL FINISHED **
  nuxtApp.runWithContext(async () => {
    const { data }: any = await useFetch('/api/hello', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: body2,
      watch: false,
      /* server:true, lazy:false works, but that is not what I want */
      server: false,
      lazy: true,
    });

    console.log('data.value (2)', data.value);
    result.value.splice(result.value.length, 0, ...(data.value || []));
  });

  return result;
}

15 replies

NNuxt

•Created by Hendrik Jan on 2/14/2024 in #❓・help

Using Nuxt3 behind Apache proxy?

Hi, has anyone experience on getting Nuxt to work behind an Apache proxy? I've tried anything I can think of but HMR keeps giving errors in my console. Part of my Virtualhost definition looks like this:

  <Location  ~ ".*">
      # .* is a wildcard for any location
      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>
  <Location  ~ "/_nuxt/ws">
    RewriteEngine on
    RewriteCond ${HTTP:Upgrade} websocket [NC]
    RewriteCond ${HTTP:Connection} upgrade [NC]
    RewriteRule .* "wss://tapp_nodejs.docker.dev:24678/$1" [P,L]

    ProxyPreserveHost On
    ProxyPass https://tapp_nodejs.docker.dev:24678
    ProxyPassReverse https://tapp_nodejs.docker.dev:24678  
  </Location>

  <Location  ~ ".*">
      # .* is a wildcard for any location
      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>
  <Location  ~ "/_nuxt/ws">
    RewriteEngine on
    RewriteCond ${HTTP:Upgrade} websocket [NC]
    RewriteCond ${HTTP:Connection} upgrade [NC]
    RewriteRule .* "wss://tapp_nodejs.docker.dev:24678/$1" [P,L]

    ProxyPreserveHost On
    ProxyPass https://tapp_nodejs.docker.dev:24678
    ProxyPassReverse https://tapp_nodejs.docker.dev:24678  
  </Location>

And to handle wss on with Nuxt I have this in nuxt.config:

vite: {
    server: {
      hmr: {
        path: "ws",
        port: 24678,
        server: {
          https: {
            key: readFileSync('docker/certificates/docker.dev.key'),
            cert: readFileSync('docker/certificates/docker.dev.crt'),
            enableTrace: true
          }
        }
      }
    }
  },

vite: {
    server: {
      hmr: {
        path: "ws",
        port: 24678,
        server: {
          https: {
            key: readFileSync('docker/certificates/docker.dev.key'),
            cert: readFileSync('docker/certificates/docker.dev.crt'),
            enableTrace: true
          }
        }
      }
    }
  },

Apache responds with: https: attempt to connect to 172.19.0.9:24678 (tapp_nodejs.docker.dev:24678) failed

8 replies

Gaming

Programming