Gosu
How can I add css as early hints?
I'm trying to implement early hints on nuxt 3.9.0 and using cloudflare
I already enable the experimental.writeEarlyHints option in nuxt.config.ts
I'm trying to debug what are the early hints that nuxt send in the header
And I can see this "link" that comes from renderResourceHeaders from vue-bundle-renderer/runtime
Most of files are .js, How can I add some css files too?
[
'</_nuxt/entry.m3um2nrU.js>; rel="modulepreload"; as="script"; crossorigin',
' </_nuxt/swiper-vue.KxQbMS3w.js>; rel="modulepreload"; as="script"; crossorigin',
' </_nuxt/auth-guard.pFDR3Huu.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/autonomous-refunds-guard.whTpR74u.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/return-module-guard.CEFj69rk.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/warranties-guard.SXCroQc2.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/without-session-guard.Ff7P_szI.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/checkout.65qMzAcZ.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/VApp.tN7SzKk1.css>; rel="prefetch"; as="style"',
' </_nuxt/default.hr0RtEQx.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/client-only.EtBdACrf.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/VApp.0FQAg4kV.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/layout.H4F050aa.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/ssrBoot.mbIRu34R.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/homeLayout.xXluYBR9.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/deployed_code_history.-Vetax_E.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/heart_plus.NQKJquIZ.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/magic_button.8Y0EFanZ.js>; rel="prefetch"; as="script"; crossorigin',
' </_nuxt/CpSearchBar.MLOSfRyF.js>; rel="prefetch"; as="script"; crossorigin',
]
1 replies
Types errors in Storybook and tests after upgrade nuxt to 3.11.0
Hello there!
I upgrade the nuxt version from 3.9.0 to 3.11.0, but now when I run
npm run tsc I get a lot of errors in all my .stories.ts and tests *.spec.ts.
I'm using storybook and vitests and import component throw this error
components/cp/CpCardEta/CpCardEta.spec.ts:4:23 - error TS2307: Cannot find module './CpCardEta.vue' or its corresponding type declarations.
node_modules/vue/jsx.d.ts:15:22 - error TS2430: Interface 'IntrinsicElements' incorrectly extends interface 'NativeElements'.
Types of property 'a' are incompatible.
Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes & ReservedProps'.
Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes'.
Types of property 'style' are incompatible.
Type 'CSSProperties' is not assignable to type 'StyleValue'.
Type 'Properties<string | number, string & {}>' is missing the following properties from type 'StyleValue[]': length, pop, push, concat, and 27 more.
15 export interface IntrinsicElements extends NativeElements {
~~~~~~~~~~~~~~~~~
node_modules/vue/jsx.d.ts:15:22 - error TS2590: Expression produces a union type that is too complex to represent.
15 export interface IntrinsicElements extends NativeElements {
~~~~~~~~~~~~~~~~~
node_modules/vue/jsx.d.ts:20:22 - error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'ReservedProps' and 'Attributes'.
Named property 'key' of types 'ReservedProps' and 'Attributes' are not identical.
20 export interface IntrinsicAttributes extends ReservedProps {}
~~~~~~~~~~~~~~~~~~~
4 import CpCardEta from './CpCardEta.vue'1 replies
How can I use 103 early hints in css and js files? (Change rel="stylesheet" to rel="preload")
Hello there!
I'm using cloudflare in my production project I'll enable early hints in cloudflare.
The problem is that all css references in link tags have
rel="stylesheet"
how can I change that attribute to rel="preload"?1 replies
How can I load fonts only in specific pages?
I'm implementing a new module for my project, this module is going to use two fonts.
But I don't want to load these fonts on my nuxt.config.ts because this loads the fonts on all pages.
How can I load fonts only in specific pages?
I already tried with useHead({ link: [{ ... }] })
But this doesn't add the link to the head tag to load the font
1 replies
