Helgi Posts - Answer Overflow

Helgi

•Created by Helgi on 11/3/2024 in #❓・help

Component failing to resolvel

I am trying to make use of the v-viewer component as a Nuxt plugin. I am adding the plugin like demonstrated below (allthough I've also tried fetching both import { directive, component } from 'v-viewer' and registering them each manually as well). plugins/v-viewer.client.ts

import { defineNuxtPlugin } from '#app'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'

export default defineNuxtPlugin((nuxtApp) => {
  console.log("Loading VueViewer Plugin") // This `console.log` message shows only in the browser, as expected.
  nuxtApp.vueApp.use(VueViewer)
})

import { defineNuxtPlugin } from '#app'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'

export default defineNuxtPlugin((nuxtApp) => {
  console.log("Loading VueViewer Plugin") // This `console.log` message shows only in the browser, as expected.
  nuxtApp.vueApp.use(VueViewer)
})

Then I rendering the component on my page like this:

<script setup lang="ts">
    const viewerOptions = "..."
    const viewerPhotos = "..."
</script>

<template>
    {{ console.log("Loading serverside") }} <!-- This outputs in both serverside and clientside -->
    <ClientOnly>
        {{ console.log("Loading viewer component") }} <!-- This only outputs clientside -->
        <viewer v-if="viewerPhotos.length > 0" :images="viewerPhotos" :options="viewerOptions">
            <NuxtImg v-for="(image, index) in viewerPhotos" :src="image.displayUrl" :alt="image.alt" :key="`slide_${index}`" />
        </viewer>
    </ClientOnly>
</template>

<script setup lang="ts">
    const viewerOptions = "..."
    const viewerPhotos = "..."
</script>

<template>
    {{ console.log("Loading serverside") }} <!-- This outputs in both serverside and clientside -->
    <ClientOnly>
        {{ console.log("Loading viewer component") }} <!-- This only outputs clientside -->
        <viewer v-if="viewerPhotos.length > 0" :images="viewerPhotos" :options="viewerOptions">
            <NuxtImg v-for="(image, index) in viewerPhotos" :src="image.displayUrl" :alt="image.alt" :key="`slide_${index}`" />
        </viewer>
    </ClientOnly>
</template>

The second I load the page in my browser, I get so many warnings and errors in my log that it completely fills up the terminal context. I had to output everything into a file to be able to find the first error, which was: WARN [Vue warn]: Failed to resolve component: viewer. I get this warning serverside even though the component works exactly as expected clientside, and the client-only console message is never outputted serverside. Which in my head means it shouldn't try to mount the component at all serverside. I feel like I've tried every approach implementing this, and no matter what I do, the error does not go away unless I comment out the viewer. Also tried transpiling, without success.

5 replies

NNuxt

•Created by Helgi on 10/28/2024 in #❓・help

Not getting correct version in @nuxtjs/strapi module

I am trying to implement the @nuxtjs/strapi module in my project based on the documentation (https://strapi.nuxtjs.org/setup). When I am trying to set version: 'v5', I'm stopped with the error Type '"v5"' is not assignable to type '"v4" | "v3" | undefined'.. After further investigations I find that the v5 value isn't even present in the node_modules/@nuxtjs/strapi/dist/module.d.ts-file. I am using "@nuxtjs/strapi": "^1.12.0", which is the newest version. Does anyone have any tips here?

21 replies

NNuxt

•Created by Helgi on 3/5/2023 in #❓・help

Issue with @nuxtjs/recaptcha

I am trying to add @nuxtjs/recaptcha to my Nuxt 3 project. I am adding the module like this

export default defineNuxtConfig({
  ...
  modules: [
    [
      "@nuxtjs/recaptcha",
      {  
        siteKey: "",
        version: 3,
      },
    ],
  ],
  ...
});

export default defineNuxtConfig({
  ...
  modules: [
    [
      "@nuxtjs/recaptcha",
      {  
        siteKey: "",
        version: 3,
      },
    ],
  ],
  ...
});

But I keep getting the error: Cannot start nuxt: Cannot read property 'options' of undefined I've tried the different variations described in the @nuxtjs/recaptcha docs, but none seem to work. Does anyone have any pointers?

3 replies

NNuxt

•Created by Helgi on 3/2/2023 in #❓・help

Deploying Nuxt3 as Static Web App in Azure

I am currently trying to deploy my Nuxt 3 application as a static web app in Azure. To set up the build and deployment I just used the default Azure suggestions for building a Nuxt 3 app (which is a predefined choice). However, during the build I get this error:

Failed to find a default file in the app artifacts folder (.output/public). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your deployment configuration file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.

Failed to find a default file in the app artifacts folder (.output/public). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your deployment configuration file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.

Build configuration:

app_location: "/"
api_location: ".output/server" 
output_location: ".output/public"

app_location: "/"
api_location: ".output/server" 
output_location: ".output/public"

In October 2022 people said that this didn't work because Static Web Apps didn't use a high enough node version, but the current node version my app is running now is Node 18 (which should be high enough?). Anyone know what to do here?

2 replies

NNuxt

•Created by Helgi on 2/28/2023 in #❓・help

Trouble with dynamic assets

8 replies

Gaming

Programming