4 저평가된 Nuxt 모듈
1. nuxt-polyfill
죽어가는 IE11을 지원해야 합니까? 그러면 아마도 폴리필이 필요할 것입니다. 폴리필을 추가하는 쉽고 효과적인 방법은 다음 플러그인을 사용하는 것입니다. nuxt-polyfill
2. nuxt-svg-로더
SVG는 특히 인라인될 때 훌륭하고 성능이 뛰어납니다. 그러나 인라인된 코드는 빠르게 다루기 어려워질 수 있습니다. Vue 컴포넌트를 임포트하듯 임포트하고 props까지 전달할 수 있다면 좋겠죠? 더 이상 보지 마십시오. nuxt-svg-loader이 당신을 덮었습니다.
팁: Tailwind 으로 작업하는 경우 Tailwind 클래스를 사용하여 SVG의 크기와 색상을 쉽게 제어할 수 있습니다.
<my-imported-svg class="fill-current text-teal-500 inline-block h-12 w-12"><my-imported-svg>
3. 포털뷰
이 Vue 구성 요소 덕분에 HTML 코드를 DOM 규칙에 따르지 않고 논리적으로 구성할 수 있습니다. 예를 들어 버튼이 모달을 여는 경우 코드의 버튼 바로 옆에 해당 모달을 가질 수 있지만 닫기 본문 태그 앞에 렌더링되도록 할 수 있습니다. portal-vue Vue 3에 내장될 진정으로 다재다능한 구성 요소입니다!
<body>
<main>
<div>
<button>Open Modal</button>
<portal to="modal">
<div>My Modal</div>
</portal>
<div>
</main>
<portal-target name="modal"></portal-target>
</body>
4. v-게으른 이미지
Intersection Observer API는 이제 모든 주요 브라우저에서 지원되며 프로그래밍 방식으로 이미지를 로드하는 등의 작업을 수행할 수 있습니다. API가 그렇게 복잡하지는 않지만 이미지를 지연 로드하는 로직을 구현하는 데는 여전히 시간이 걸립니다.
Chrome에서는 이미
<img loading="lazy">를 작성할 수 있지만 다른 브라우저 공급업체에서 이 새 속성을 지원하려면 시간이 걸립니다.그 동안 v-lazy-image을 사용하여 동일한 효과를 얻으십시오! 저해상도 자리 표시자를 제공할 수도 있습니다!
Reference
이 문제에 관하여(4 저평가된 Nuxt 모듈), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mornir/5-underrated-nuxt-modules-3f8d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
