Stefano Bartoletti Posts - Answer Overflow

Stefano Bartoletti

Posts Comments

NNuxt

•Created by Stefano Bartoletti on 10/9/2024 in #❓・help

Problem with Nuxt UI, it looks like some CSS classes don't correctly apply styles

5 replies

NNuxt

•Created by Stefano Bartoletti on 9/25/2024 in #❓・help

Are Nuxt UI licenses available for open-source docs projects?

I'm the author and maintainer of an open-source Nuxt module, "Nuxt Social Share", whose code is available here https://github.com/stefanobartoletti/nuxt-social-share The documentation in itself is nothing complicated, but it is starting to be a little too long for a simple readme, and I'm willing to create some proper docs pages. I've tried to explore a bit the whole Nuxt ecosystem, and the only starting template that I found for creating docs is available here https://ui.nuxt.com/pro/templates, but it seems that a commercial license is required. By chance, is there something like a open-source license for a situation like this?

3 replies

NNuxt

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

I need help with an icon library that provides a Vue package too, but is not working on Nuxt

I'm trying to integrate "Atlas Icons" in a Nuxt 3 project. They have a dedicated Vue package too, as detailed here: https://atlasicons.vectopus.com/packages, that provides a custom Atlas component used to render the icons. I've tried it on plain new Vue CLI project and it works as expected by following their instructions, but I'm not able to make it work on Nuxt too. My guess is that I'm not importing it correctly (Nuxt app is not starting and rendering correctly, but I cannot see any specific error). I think I've misconfigured something, it is probably something trivial since on plain Vue it is working as expected, but I cannot find a solution by myself. I've prepared a little demo on stackblitz here, with more comments and info provided in-context: https://stackblitz.com/edit/github-abgc2q?file=app.vue It would be great if someone could be able to help me solve this! 💚 🙏

4 replies

NNuxt

•Created by Stefano Bartoletti on 3/6/2024 in #❓・help

What is the best/easiest way to inline a dynamic SVG retrieved from CMS?

I'm trying to find what is the most easy and straightforward way to import a SVG retrieved from a CMS (So, basically I'm getting its URL, i.e. https://my.cdn.com/274945/0x0/026c911fd1/my-svg-file.svg ) and inline it in my templates. I've tried to use vite-svg-loader, but I've been unsuccessful to make it work correctly (I receive promises instead of the actual svg content, and also errors like couldn't be loaded by vite-svg-loader, fallback to default loader ) If someone has managed to achieve this, would you care to share what worked for you, so I can have a look and see if I can adapt it to work in my case too? Thanks!

1 replies

NNuxt

•Created by Stefano Bartoletti on 3/9/2023 in #❓・help

How to get transition config from an external object

I have the following Script section in a component used as a page

<script setup>
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

const defaultTransition = { name: 'default', mode: 'out-in' }

const gsapTransition = {
  name: 'cover',
  mode: 'out-in',
  onEnter: (el, done) => {
    gsap
      .timeline({
        defaults: {
          duration: 0.75,
        },
        onComplete: done,
      })
      .to('#transition-cover', {
        height: '0vh',
        top: '100vh',
      })
      .set('#transition-cover', {
        top: '0vh',
      })
  },

  onLeave: (el, done) => {
    gsap
      .timeline({
        defaults: {
          duration: 0.75,
        },
        onComplete: done,
      })
      .to('#transition-cover', {
        height: '100vh',
      })
  },
}

definePageMeta({
  pageTransition: gsapTransition,
})

</script>

<script setup>
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

const defaultTransition = { name: 'default', mode: 'out-in' }

const gsapTransition = {
  name: 'cover',
  mode: 'out-in',
  onEnter: (el, done) => {
    gsap
      .timeline({
        defaults: {
          duration: 0.75,
        },
        onComplete: done,
      })
      .to('#transition-cover', {
        height: '0vh',
        top: '100vh',
      })
      .set('#transition-cover', {
        top: '0vh',
      })
  },

  onLeave: (el, done) => {
    gsap
      .timeline({
        defaults: {
          duration: 0.75,
        },
        onComplete: done,
      })
      .to('#transition-cover', {
        height: '100vh',
      })
  },
}

definePageMeta({
  pageTransition: gsapTransition,
})

</script>

I get a 500 error gsapTransition is not defined, and the same happens if I try to use defaulTransition. I need to store the configuration to an external object, but looks like I am doing something wrong. How can I solve this?

2 replies

Gaming

Programming