BobLamarley Posts - Answer Overflow

BobLamarley

•Created by BobLamarley on 2/18/2025 in #❓・help

Layout and Pages

Hi guys, I'm trying to have a pages/index.vue that route to components/HomePage.vue when connected and components/LandingPage.vue when non connected And i also have layouts/default.vue for all pages when connected who contains a menu, and layouts/unauthenticated.vue for the LandingPage.vue only for now:

<script setup>
import { useUserStore } from '@/stores/user'
import HomePage from '@/components/HomePage.vue'
import LandingPage from '@/components/LandingPage.vue'

const userStore = useUserStore()
const { isAuthenticated } = storeToRefs(userStore)

definePageMeta({
  layout: isAuthenticated.value ? 'default' : 'unauthenticated'
})
</script>

<template>
  <div>
    <!-- Conditionally render the components based on authentication state -->
    <component :is="isAuthenticated ? HomePage : LandingPage" />
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import HomePage from '@/components/HomePage.vue'
import LandingPage from '@/components/LandingPage.vue'

const userStore = useUserStore()
const { isAuthenticated } = storeToRefs(userStore)

definePageMeta({
  layout: isAuthenticated.value ? 'default' : 'unauthenticated'
})
</script>

<template>
  <div>
    <!-- Conditionally render the components based on authentication state -->
    <component :is="isAuthenticated ? HomePage : LandingPage" />
  </div>
</template>

` SO i have this code but the part : definePageMeta({ layout: isAuthenticated.value ? 'default' : 'unauthenticated' }) Is causing me an error : index.vue?macro=true:2 Uncaught ReferenceError: isAuthenticated is not defined at index.vue?macro=true:2:11 Anyone has an idea ?

6 replies

NNuxt

•Created by BobLamarley on 12/4/2024 in #❓・help

Use a library as a plugin

6 replies

NNuxt

•Created by BobLamarley on 11/6/2024 in #❓・help

Trying to get dynamically created ref

I'm trying to get ref that are dynamically created but it doesn't work very well In my template i have :

  <v-card
                    color="tertiary"
                    class="mx-auto mt-3 mb-3"
                    elevation="5"
                    v-for="(section, index_section) in dataReport.sections"
                    :key="index_section"
                    :ref="`section-${index_section}`"
                    ref="sectionRefs"
                >

  <v-card
                    color="tertiary"
                    class="mx-auto mt-3 mb-3"
                    elevation="5"
                    v-for="(section, index_section) in dataReport.sections"
                    :key="index_section"
                    :ref="`section-${index_section}`"
                    ref="sectionRefs"
                >

where i'm creating a :ref=section-${indexsection} and index_section is 0,1,2,3etc Then in my script i have:

    const sectionRefs = ref([])

   watch(dataReport, async (newData) => {
        console.log(newData)
        if (newData && newData.sections) {
            await nextTick() 
            console.log("watch la")
            console.log(newData.sections)
            sectionRefs.value = newData.sections.map((, index) => {
                console.log("index map sectionrefs")
                console.log(index)
                document.querySelector([ref="section-${index}"])
                console.log(document.querySelector([ref="section-${index}"])                )
            })
            console.log(sectionRefs.value)
        }
    })

    const sectionRefs = ref([])

   watch(dataReport, async (newData) => {
        console.log(newData)
        if (newData && newData.sections) {
            await nextTick() 
            console.log("watch la")
            console.log(newData.sections)
            sectionRefs.value = newData.sections.map((, index) => {
                console.log("index map sectionrefs")
                console.log(index)
                document.querySelector([ref="section-${index}"])
                console.log(document.querySelector([ref="section-${index}"])                )
            })
            console.log(sectionRefs.value)
        }
    })

But the console.log(document.querySelector([ref="section-${index}"]) ) give me null, as like it didn't has any ref section-0 for example, but there is because my template created it with the :ref=section-${index_section}

5 replies

NNuxt

•Created by BobLamarley on 10/31/2024 in #❓・help

SVG and CSS transitions

I'm trying to animate an svg but it doesn't work, it display the svg but doesn't interpret the CSS transitions properties in the <style scoped> part according to the svg Is there something i need to configure in nuxt.config.js ? Here is the playground: https://stackblitz.com/edit/github-uzr4ak?file=public%2Flogo.svg,app.vue

14 replies

NNuxt

•Created by BobLamarley on 8/9/2024 in #❓・help

Nuxt 3 to Nuxt 4

13 replies

NNuxt

•Created by BobLamarley on 8/5/2024 in #❓・help

Vuera and nuxt - Use react components in vue

Hello, I'm having trouble setting up vuera via the nuxt.config.js in order to be able to use React component in vue Has anyone already done this ? 🙂 Here is my nuxt.config.js:

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import react from '@vitejs/plugin-react';

const isDevelopment = process.env.NODE_ENV === 'development';

export default defineNuxtConfig({
  srcDir: "src",
  pages: true,
  devtools: { 
    enabled: true,
    timeline: {
      enabled: true,
    } 
  },
  ssr: true,
  runtimeConfig: {
    public: {
        domain: process.env.NUXT_PUBLIC_DOMAIN_NAME,
        http: process.env.NUXT_PUBLIC_HTTP,
    }
  },
  build: {
    transpile: ['vuetify', 'vue-sonner'],
    babel: {
      "presets": "react",
      "plugins": ["vuera/babel"]
    }
  },
  plugins: [
    { src: '~/plugins/plausible.js', mode: 'client' },
    { src: '~/plugins/matomo.js', mode: 'client' }
  ],  
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    '@pinia/nuxt',
    'nuxt3-leaflet',
    '@sidebase/nuxt-pdf',
  ],
  vite: {
    server: isDevelopment ? {
      https: false,
      hmr: {
        protocol: "ws"
      }
    } : {
      https: true,
      hmr: {
        protocol: 'wss'
      }
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
    plugins: [react()],
  },
})

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import react from '@vitejs/plugin-react';

const isDevelopment = process.env.NODE_ENV === 'development';

export default defineNuxtConfig({
  srcDir: "src",
  pages: true,
  devtools: { 
    enabled: true,
    timeline: {
      enabled: true,
    } 
  },
  ssr: true,
  runtimeConfig: {
    public: {
        domain: process.env.NUXT_PUBLIC_DOMAIN_NAME,
        http: process.env.NUXT_PUBLIC_HTTP,
    }
  },
  build: {
    transpile: ['vuetify', 'vue-sonner'],
    babel: {
      "presets": "react",
      "plugins": ["vuera/babel"]
    }
  },
  plugins: [
    { src: '~/plugins/plausible.js', mode: 'client' },
    { src: '~/plugins/matomo.js', mode: 'client' }
  ],  
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    '@pinia/nuxt',
    'nuxt3-leaflet',
    '@sidebase/nuxt-pdf',
  ],
  vite: {
    server: isDevelopment ? {
      https: false,
      hmr: {
        protocol: "ws"
      }
    } : {
      https: true,
      hmr: {
        protocol: 'wss'
      }
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
    plugins: [react()],
  },
})

Here is my react component in my vue project, JBrowseComponent.jsx:

import React from 'react';
import { createViewState, JBrowseLinearGenomeView } from '@jbrowse/react-linear-genome-view';
import { observer } from 'mobx-react';

const JBrowseComponent = observer(({ config }) => {
  const state = createViewState(config);

  return <JBrowseLinearGenomeView viewState={state} />;
});

export default JBrowseComponent;

import React from 'react';
import { createViewState, JBrowseLinearGenomeView } from '@jbrowse/react-linear-genome-view';
import { observer } from 'mobx-react';

const JBrowseComponent = observer(({ config }) => {
  const state = createViewState(config);

  return <JBrowseLinearGenomeView viewState={state} />;
});

export default JBrowseComponent;

2 replies

NNuxt

•Created by BobLamarley on 2/16/2024 in #❓・help

Call method og a RefImpl Object

6 replies

NNuxt

•Created by BobLamarley on 2/15/2024 in #❓・help

NuxtLink create an a href="", but a click on it doesn't change page, anything happen

7 replies

Gaming

Programming