Hendrik Jan Comments - Answer Overflow

Hey, thanks for the help. Unfortunately none of the suggestions work 😢 export { t } from '../utils/translate is there in imports.d.ts, but restarting VS-Code didn't fix. Within <script> block no error, but within <template> this problem is still not fixed. I also tried another editor (Zed) --> same problem.

14 replies

NNuxt

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

Can you extend H3EventContext?

@Gerbuuun Thanks. It seems like I had some other problems with TypeScript to fix first. And probably a restart of the server also fixed something. Now I'm using const context = event.context as Context and it is working. Your solution looks like the way to do it, but I coudn't get it to work in my project. I might try that again later.

4 replies

NNuxt

•Created by marz on 7/21/2024 in #❓・help

HMR in docker not working when using reverse proxy

Maybe this will be of use for you. As it's a long time ago we got this working, I don't remember all the details on how/why this works.

9 replies

NNuxt

•Created by marz on 7/21/2024 in #❓・help

HMR in docker not working when using reverse proxy

# (part of) docker-compose.yml
services:
  nodejs:
    hostname: tapp_nodejs.docker.dev
    container_name: tapp_nodejs
    build:
      context: .
      dockerfile: docker/nodejs.dockerfile
    depends_on:
      - 'mariadb'
    environment:
      ENVIRONMENT: '${ENVIRONMENT:-development}'
      DOMAIN: '${DOMAIN:-https://tapp.docker.dev}'
      PORT: '${PORT:-3000}'
      DOCKER_RUNNING: 'true'
      CYPRESS_INSTALL_BINARY: 0
      # workaround for Prisma issue https://github.com/prisma/prisma/issues/12338
      QUERY_BATCH_SIZE: 999
      # DEBUG: "connect:dispatcher"
    volumes:
      - ./:/var/app
    ports:
      - '3004:3000'
      # We will use port 3204 for Playwright ui
      - '3204:3204'
      # Default port for Vite HMR is 24678
      - '24678:24678'
      # Port 5555 can be used by `npx prisma studio` for debugging
      - '5555:5555'
    networks:
      - default
    tmpfs: /tmp
  apache:
    hostname: tapp_apache.docker.dev
    container_name: tapp_apache
    build:
      context: .
      dockerfile: docker/apache.dockerfile
    volumes:
      - ./docker/apache/extra:/usr/local/apache2/conf/extra
    networks:
      - default

# (part of) docker-compose.yml
services:
  nodejs:
    hostname: tapp_nodejs.docker.dev
    container_name: tapp_nodejs
    build:
      context: .
      dockerfile: docker/nodejs.dockerfile
    depends_on:
      - 'mariadb'
    environment:
      ENVIRONMENT: '${ENVIRONMENT:-development}'
      DOMAIN: '${DOMAIN:-https://tapp.docker.dev}'
      PORT: '${PORT:-3000}'
      DOCKER_RUNNING: 'true'
      CYPRESS_INSTALL_BINARY: 0
      # workaround for Prisma issue https://github.com/prisma/prisma/issues/12338
      QUERY_BATCH_SIZE: 999
      # DEBUG: "connect:dispatcher"
    volumes:
      - ./:/var/app
    ports:
      - '3004:3000'
      # We will use port 3204 for Playwright ui
      - '3204:3204'
      # Default port for Vite HMR is 24678
      - '24678:24678'
      # Port 5555 can be used by `npx prisma studio` for debugging
      - '5555:5555'
    networks:
      - default
    tmpfs: /tmp
  apache:
    hostname: tapp_apache.docker.dev
    container_name: tapp_apache
    build:
      context: .
      dockerfile: docker/apache.dockerfile
    volumes:
      - ./docker/apache/extra:/usr/local/apache2/conf/extra
    networks:
      - default

9 replies

NNuxt

•Created by marz on 7/21/2024 in #❓・help

HMR in docker not working when using reverse proxy

Reverse proxying is really a pull-your-hair-and-bang-the-wall thing within docker 😦 We've currently got it working with this setup (reverse proxy is Apache -- we are stuck to that):

// (part of) nuxt.config.js
vite: {
    server: {
      hmr: {
        path: 'ws',
      }
    },
  },

// (part of) nuxt.config.js
vite: {
    server: {
      hmr: {
        path: 'ws',
      }
    },
  },

# (part of) httpd-vhosts.conf
  <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">
      ProxyPreserveHost On

      # Proxy both ws and http by placing ws before http as described in this documentation:
      # https://httpd.apache.org/docs/trunk/mod/mod_proxy_wstunnel.html
      ProxyPass ws://tapp_nodejs.docker.dev:3000/_nuxt/ws
      ProxyPass http://tapp_nodejs.docker.dev:3000/_nuxt/ws upgrade=websocket
      ProxyPassReverse ws://tapp_nodejs.docker.dev:3000/_nuxt/ws
  </Location>
  <Location  ~ "(/login|/auth/|/__webpack_hmr/).*">
      AuthType openid-connect
      Require valid-user

      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>

# (part of) httpd-vhosts.conf
  <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">
      ProxyPreserveHost On

      # Proxy both ws and http by placing ws before http as described in this documentation:
      # https://httpd.apache.org/docs/trunk/mod/mod_proxy_wstunnel.html
      ProxyPass ws://tapp_nodejs.docker.dev:3000/_nuxt/ws
      ProxyPass http://tapp_nodejs.docker.dev:3000/_nuxt/ws upgrade=websocket
      ProxyPassReverse ws://tapp_nodejs.docker.dev:3000/_nuxt/ws
  </Location>
  <Location  ~ "(/login|/auth/|/__webpack_hmr/).*">
      AuthType openid-connect
      Require valid-user

      ProxyPreserveHost On
      ProxyPass http://tapp_nodejs.docker.dev:3000
      ProxyPassReverse http://tapp_nodejs.docker.dev:3000
  </Location>

9 replies

NNuxt

•Created by ∂Max on 6/24/2024 in #❓・help

Support of the new URL(..., import.meta.url) syntax?

I'm not sure if this will help you, but for me it seems to work in nuxt.config.js in runtimeConfig:

// nuxt.config.js
export default defineNuxtConfig({
  rootDir: new URL('./', import.meta.url).pathname,

  runtimeConfig: {
    rootDir: new URL('./', import.meta.url).pathname,
  }
})

// nuxt.config.js
export default defineNuxtConfig({
  rootDir: new URL('./', import.meta.url).pathname,

  runtimeConfig: {
    rootDir: new URL('./', import.meta.url).pathname,
  }
})

And then somewhere else use it like:

// server/api/v1/changelog/index.get.ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig();
  const changelog = fs.readFileSync(config.rootDir + '/CHANGELOG.md', 'utf8');
})

// server/api/v1/changelog/index.get.ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig();
  const changelog = fs.readFileSync(config.rootDir + '/CHANGELOG.md', 'utf8');
})

6 replies

NNuxt

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

Error "currentRenderingInstance is null" since upgrade of Nuxt

A bit more info: the error only happens the first time after the nodejs server is reloaded. I've set ssr:false so it's not a hydration problem. Als the problem is only in dev mode, not when building.

5 replies

NNuxt

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

Error "currentRenderingInstance is null" since upgrade of Nuxt

I still didn't find a solution, but it seems to be centered around nuxt/i18n and our Docker setup.

5 replies

NNuxt

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

Error "currentRenderingInstance is null" since upgrade of Nuxt

Unfortunately I've already tried all those options. Also tried to delete the .nuxt folder, nothing fixes my problem yet :-(.

5 replies

NNuxt

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

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

"compilerOptions": {
    "paths": {
      "~/*": ["./*"],
      "~~/*": ["./*"],
    }
}

"compilerOptions": {
    "paths": {
      "~/*": ["./*"],
      "~~/*": ["./*"],
    }
}

Now VSCode understands where to look for ~/assets and so on.

3 replies

NNuxt

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

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

I seem to have found a solution. The tsconfig.json option "paths" actually uses relative paths, so they will work both inside Docker and outside Docker. Added this to my tsconfig.json:

3 replies

NNuxt

•Created by whatstaz on 4/3/2024 in #❓・help

Where to fetch initial user data

You could try it in "app.vue" (you probably have to create that file, see the docs). Simplified example of my code (I'm using Nuxt useState as you can see):

// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const userData = useState('user');

const data = await useFetch(...);
userData.value = data.value.user;
</script>

// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const userData = useState('user');

const data = await useFetch(...);
userData.value = data.value.user;
</script>

10 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?

In case someone else wants to solve a similar problem, here is a working reproduction with some accompanying text: https://stackblitz.com/edit/github-o9ivmk-qkcdj8?file=app.vue

15 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?

:-).

15 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 changed "lazy:true" to "lazy:false", zo the data is ready right away as I understand it.

15 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?

When I click the refresh-button I first see "[0,1,2]" (which I think is rendered on the server) and after a fraction of a second this is changed to "[0,1,2,3,4,5,6,7,8,9]", so it seems to work.

15 replies

Gaming

Programming