IsaacR943 Posts - Answer Overflow

IsaacR943

•Created by IsaacR943 on 11/13/2024 in #❓・help

Make explicit auto import of a component

<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'

const show = ref(false)
</script>

is this possible?
import { main as Logo } from '#components/navbar/logo/main.vue'

<script setup lang="ts">
import { NuxtLink, LazyMountainsList } from '#components'

const show = ref(false)
</script>

is this possible?
import { main as Logo } from '#components/navbar/logo/main.vue'

5 replies

NNuxt

•Created by IsaacR943 on 11/13/2024 in #❓・help

Disable auto components

Is it possible to disable auto import ONLY components for ONLY a specific page?

5 replies

NNuxt

•Created by IsaacR943 on 11/13/2024 in #❓・help

Layer doesnt import module

I have the Supabase module installed in a layer, along with several components, each with its own functionality. When I use this layer via extend in the main application, the components from the Supabase layer appear, but their functionality doesn’t work. The error message is clear: the useSupabaseClient composable from the Supabase layer isn’t available, even though this composable is provided by the module. What could be causing this issue? (Note: the base application doesn’t have the Supabase module itself—I thought that if the layer were imported correctly, it should include the module as well.)

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  extends: ['../nuxtLayers/authentication2'],
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    'radix-vue/nuxt',
    '@vueuse/nuxt'
  ],
  runtimeConfig: {
    public: {
      PADDLE_ENVIRONMENT: process.env.PADDLE_ENVIRONMENT,
      PADDLE_FRONT_TOKEN: process.env.PADDLE_FRONT_TOKEN,
    },
  },
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    serviceKey: process.env.SUPABASE_SERVICE_KEY,
    clientOptions: {
      auth: {
        flowType: 'pkce',
        autoRefreshToken: true,
              detectSessionInUrl: true,
              persistSession: false,
      },
    },
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      include: undefined,
      exclude: ['/','/signout','/settings','/help'],
      cookieRedirect: false,}}})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  extends: ['../nuxtLayers/authentication2'],
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    'radix-vue/nuxt',
    '@vueuse/nuxt'
  ],
  runtimeConfig: {
    public: {
      PADDLE_ENVIRONMENT: process.env.PADDLE_ENVIRONMENT,
      PADDLE_FRONT_TOKEN: process.env.PADDLE_FRONT_TOKEN,
    },
  },
  supabase: {
    url: process.env.SUPABASE_URL,
    key: process.env.SUPABASE_KEY,
    serviceKey: process.env.SUPABASE_SERVICE_KEY,
    clientOptions: {
      auth: {
        flowType: 'pkce',
        autoRefreshToken: true,
              detectSessionInUrl: true,
              persistSession: false,
      },
    },
    redirectOptions: {
      login: '/login',
      callback: '/confirm',
      include: undefined,
      exclude: ['/','/signout','/settings','/help'],
      cookieRedirect: false,}}})

Uncaught (in promise) ReferenceError: useSupabaseClient is not defined
    at setup (authenticationSigninLogin.vue:2:18)
      ...
    at processFragment (runtime-core.esm-bundler.js?v=6c5563d9:5099:7)
    at patch (runtime-core.esm-bundler.js?v=6c5563d9:4659:9)

Uncaught (in promise) ReferenceError: useSupabaseClient is not defined
    at setup (authenticationSigninLogin.vue:2:18)
      ...
    at processFragment (runtime-core.esm-bundler.js?v=6c5563d9:5099:7)
    at patch (runtime-core.esm-bundler.js?v=6c5563d9:4659:9)

5 replies

NNuxt

•Created by IsaacR943 on 11/13/2024 in #❓・help

Import layer with supabase module

Hello, so i have a layer that takes care of the auth in the application Im using supabase module for all the auth and it works well on the layer However, when i try to expand the origin app i got this error on the console

nuxtLayers/authentication/node_modules/@supabase/postgrest-js/dist/cjs/index.js?v=393341da' does not provide an export named 'default'

nuxtLayers/authentication/node_modules/@supabase/postgrest-js/dist/cjs/index.js?v=393341da' does not provide an export named 'default'

I understand only superficially the error - there is no default export name in the file at the node module. However 1) i dont know what is trying to use this 'default' value 2) im not aware what this default value contains 3) since this error doesnt appear on the origin layer idk what could cause it. The app doesnt crashes, the routes are protected so i assume the layer was imported properly. However, the menu on the main app is broken, its no longer possible to navigate between pages in the app with the menu if I import the layer. Not sure where to start to solve this problem

6 replies

NNuxt

•Created by IsaacR943 on 11/5/2024 in #❓・help

nuxt 4 release date

When is the Nuxt 4 release date scheduled?

4 replies

NNuxt

•Created by IsaacR943 on 11/5/2024 in #❓・help

Layers nuxt 4

Hello, im about to use layers for the first time Should i wait a little longer to start learning about layers or the current set up with nuxt3 is fully compatible? - Are nuxt 3 layers compatible with nuxt 4? - Is this video up to date? - Is documentation up to date? Thank you!

5 replies

NNuxt

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

Deactive jump to the top

Hey, so is no longer possible to deactivate jump to the top in nuxt? (apparently this no longer is possible?)

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@nuxtjs/google-fonts',
    'radix-vue'
  ],
  router: {
    scrollBehavior: (to, from, savedPosition) => {

      if (savedPosition) {
        return savedPosition
      }
      
      if (to.hash) {
        return {
          el: to.hash,
          behavior: 'smooth'
        }
      }
      
      return false
    }
  }
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@nuxtjs/google-fonts',
    'radix-vue'
  ],
  router: {
    scrollBehavior: (to, from, savedPosition) => {

      if (savedPosition) {
        return savedPosition
      }
      
      if (to.hash) {
        return {
          el: to.hash,
          behavior: 'smooth'
        }
      }
      
      return false
    }
  }
})

6 replies

NNuxt

•Created by IsaacR943 on 9/30/2024 in #❓・help

[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms firs

UPDATE: Vue / vite error No clue how to solve this. Context - I have one layout passing props to the only slot. The props in this slot are used by all pages. For some reason the code breaks with the next implementation

// layout.vue
<main>
       <slot
      :headerContent="header"
      :keyPartnerships="key_partnerships"
      :keyActivities="key_activities"
      :keyResources="key_resources"
   ></slot>
  
    </main>

// layout.vue
<main>
       <slot
      :headerContent="header"
      :keyPartnerships="key_partnerships"
      :keyActivities="key_activities"
      :keyResources="key_resources"
   ></slot>
  
    </main>

// component that uses the slot
     <template v-slot="{ headerContent, ... }" >

        <dynamicScrollCard title="🧑🏻‍🤝‍🧑🏻 Key Partners" content="another content" :mykey="keyPartnerships" />
....
      </template>

// component that uses the slot
     <template v-slot="{ headerContent, ... }" >

        <dynamicScrollCard title="🧑🏻‍🤝‍🧑🏻 Key Partners" content="another content" :mykey="keyPartnerships" />
....
      </template>

im sure it has to do with templates.

2 replies

NNuxt

•Created by IsaacR943 on 9/29/2024 in #❓・help

Stuck with reactivity not working

Gpt, claude, meta, asked everywhere. Seems there isnt a solid response why this snippet isnt working.

<template>
      <div class=" mx-2 md:mx-20 lg:mx-20 bg-white my-5 p-5 rounded-3xl flex flex-wrap flex-col gap-2">
      <div class="font-bold text-2xl flex "><div class="bg-slate-100 flex-shrink-0 py-1 px-2 hover:bg-slate-400 border-4 border-slate-400/40 rounded-2xl">{{ title }}</div></div>
      <div class="text-xl text-slate-700" v-html="content"></div>
      <div>{{ my_redis_value.value }}</div>
    <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

      </div>
</template>

<script setup> 


const props = defineProps({
  mykey: {
    type: [String],
    required: true,
    default: 'default value props'
  },
  title: {
        type: String,
        required: true
    },
    content: {
        type: String,
        default: 'us.'
    },
});


const my_redis_value = ref('');

async function fetchRedisValue(key) {
  my_redis_value.value = await read_redis_key(key);
  console.log('line 50 - value of redis value', my_redis_value.value)
  console.log('line 51 - value of read redis', await read_redis_key(key))
}

watch(() => props.mykey, (newKey) => {
  fetchRedisValue(newKey);
});

<template>
      <div class=" mx-2 md:mx-20 lg:mx-20 bg-white my-5 p-5 rounded-3xl flex flex-wrap flex-col gap-2">
      <div class="font-bold text-2xl flex "><div class="bg-slate-100 flex-shrink-0 py-1 px-2 hover:bg-slate-400 border-4 border-slate-400/40 rounded-2xl">{{ title }}</div></div>
      <div class="text-xl text-slate-700" v-html="content"></div>
      <div>{{ my_redis_value.value }}</div>
    <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

      </div>
</template>

<script setup> 


const props = defineProps({
  mykey: {
    type: [String],
    required: true,
    default: 'default value props'
  },
  title: {
        type: String,
        required: true
    },
    content: {
        type: String,
        default: 'us.'
    },
});


const my_redis_value = ref('');

async function fetchRedisValue(key) {
  my_redis_value.value = await read_redis_key(key);
  console.log('line 50 - value of redis value', my_redis_value.value)
  console.log('line 51 - value of read redis', await read_redis_key(key))
}

watch(() => props.mykey, (newKey) => {
  fetchRedisValue(newKey);
});

Context: props.mykey is a changing value. When the value matches some key at the redis database the template should show that redis value. The function await read_redis_key(key) work and logs line 50 and line 51 show the expected result. However, on the template this snippet is showing up as empty (undefined)

  <div>{{ my_redis_value.value }}</div>
  <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

  <div>{{ my_redis_value.value }}</div>
  <div>{{ console.log('LINE 6x Rendered with value:', my_redis_value.value) }}</div>

7 replies

NNuxt

•Created by IsaacR943 on 6/20/2024 in #❓・help

nuxt supabase auth and checkout session

I have to be the guy that ask for this - but I am. Main question: Should I install the supabase module or instead use the "supabase init" command? Additional: Supabase and nuxt. Goal: Get a full fledge app (auth and checkout session) - 1. How to enable auth from supabase into nuxt (do I have to build from the ground the ui for user, pass, gmail, etc - any official repos you recommend?) 2. Stripe session - I heard is better to use something like https://github.com/juspay/hyperswitch - anyone use it before?

1 replies

Gaming

Programming