> Rodrigo Posts - Answer Overflow

> Rodrigo

Explore posts from servers

•Created by > Rodrigo on 5/22/2024 in #❓・help

Per page Tailwind opt-in or opt-out! [nuxt/ui]

Hello good people of the internet! I have challenge I would like to solve and maybe improve some modules out there with it! 🙂 I have at my hands a very big CMS Renderer (the frontend part) built with Nuxt 3 and I would like to give some context: - It renderes a lot of websites depending on a special header that we will call site-key this header could have values like facebook, amazon, etc and makes a request to the CMS and builds the page for that key. - It uses normal CSS styles and some SASS sometimes. The problem 🥁 We want to incorporate a new fantastic website that sells precious candles but they are edgy and really like the future o Tailwind V4 (who could blame them right?) and want to bring Tailwind to the mixture and use Nuxt UI Pro! Currently when you use nuxt/ui in your project it installs all the plugins and modules it needs and leaks the tailwind base CSS file to every page Nuxt serves which Amazon is not really a fan... It includes some resets in some styles and a base CSS file that is imported everywhere and 3 Nuxt plugins that could be skipped when some clientes don't want to use Nuxt UI for example! Basically a way to, at runtime, disable tailwind CSS import and the easy part stop the execution of Nuxt UI plugins! I am free to hear any ideas and to implement them bringing more flexibility to the ecosystem! :nuxt:

2 replies

NNuxt

•Created by > Rodrigo on 6/23/2023 in #❓・help

Just a couple of questions regarding `useAsyncData` and `useLazyAsyncData` (And a memory leak)

2 replies

NNuxt

•Created by > Rodrigo on 3/21/2023 in #❓・help

Extend vite bundle (add assets from storybook and respect storybook alias)

Hello everyone!! I have a new Nuxt 3 project where I use Storybook and Nuxt 3 but each one lives in his own workspace. I created a module in my Storybook workspace where I import all components:

// @ts-ignore
import { defineNuxtModule } from '@nuxt/kit'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'

const __dirname = dirname(fileURLToPath(import.meta.url))

export default defineNuxtModule({
  hooks: {
    'components:dirs' (dirs) {
      dirs.push({
        extensions: ['.vue'],
        path: join(__dirname, 'src/components'),
      })
    },
  },
})

// @ts-ignore
import { defineNuxtModule } from '@nuxt/kit'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'

const __dirname = dirname(fileURLToPath(import.meta.url))

export default defineNuxtModule({
  hooks: {
    'components:dirs' (dirs) {
      dirs.push({
        extensions: ['.vue'],
        path: join(__dirname, 'src/components'),
      })
    },
  },
})

Problem: Some components import .scss files and inside those .scss files we have some things like this: @import "@/assets/styles/foundations"; When I import this files in the Nuxt 3 workspace my "@" alias points to the workspace root dir which is different from my Storybook root dir. When using storybook the import will look something like: .../storybook/src/assets/styles/foundations But when importing inside the nuxt 3 workspace: .../nuxt3/assets/styles/foundations I see 2 solutions for this: Bundle the storybook package with my nuxt 3 workspace or just add the assets I need with some lifecycle hook? Transpile all the alias to respect the workspace vite config? I am having trouble to find a good solution.. Can you help me? 🙂

1 replies

NNuxt

•Created by > Rodrigo on 2/20/2023 in #❓・help

NuxtConfig typescript error

150 replies

NNuxt

•Created by > Rodrigo on 2/19/2023 in #❓・help

Type instantiation is excessively deep and possibly infinite. ts(2589)

21 replies

NNuxt

•Created by > Rodrigo on 2/17/2023 in #❓・help

Import alias are not working for folders outside sourceDir

Hello everyone!! I have some issues while importing files out of the sourceDir with an alias in Nuxt 3. I am at the phone, so I will try to make the best reproduction of what I have. Imagine you have a folder like this: /nuxt-project/modules/some-module.js /common-utils/foo.js Now I would like to create an alias import like: import something from '@alias/foo.js'. I tried defining it on nuxt.config.ts but without any results. Importing the file with relative paths work fine tho!

14 replies

Gaming

Programming