BobLamarley Posts - Answer Overflow

BobLamarley

•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

13 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