본문 바로가기

JavaScript/Vue.js(프레임워크)

 (16)
[Vue.js] Nuxt3 렌더링 모드(Rendering Modes) 렌더링 모드(Rendering Modes) Nuxt는 다양한 렌더링 모드를 지원합니다. 기본적으로는 범용 렌더링을 사용하여 사용자 경험, 성능 및 검색 엔진 최적화를 개선하지만, 클라이언트 사이드 렌더링도 지원하며, 하이브리드 렌더링과 CDN 엣지 서버에서 애플리케이션을 렌더링하는 옵션도 제공합니다. 브라우저와 서버는 모두 Vue.js 컴포넌트를 HTML 요소로 변환할 수 있습니다. 렌더링 모드는 한 줄의 설정으로 변경할 수 있습니다. 브라우저와 서버 모두 JavaScript 코드를 해석하여 Vue.js 컴포넌트를 HTML 요소로 변환할 수 있습니다. 이 과정을 렌더링이라고 합니다. Nuxt는 유니버설 렌더링과 클라이언트 사이드 렌더링을 모두 지원하며, 두 가지 방식은 각각 장단점이 있습니다.Nuxt는 ..
[Vue.js] Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs' 오류 해결하기 Nuxt3에서 Pinia를 사용하기 위해 Nuxt 가이드 문서에 따라 @pinia/nuxt 모듈을 설치하고 예제 코드를 추가하였더니 아래와 같은 오류가 발생하였다. ERROR Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs' 해결 방법npm install pinia  추가로 pinia 설치하다가 오류가 나는 경우가 있다.npm error code ERESOLVEnpm error ERESOLVE could not resolve 이 경우 아래 코드를 package.json 파일에 추가해준다.{ ... "overrides": { "vue": "latest" }, ...}  Referencehttps://nuxt.com/modules/p..
[Vue.js] Nuxt3 nuxti18n Invalid linked format error 해결하기 nuxti18n을 적용하면서 기존에 vue-i18n에서 사용하던 국제화 텍스트들을 그대로 가져왔더니 아래와 같은 오류가 발생하였다. 오류 내용[오후 7:20:48] ERROR [unplugin-vue-i18n] Invalid linked format (error code: 10) in /Users/user/Documents/workspace/vue3/i18n/en-US.json target message: abcd1234@naver.com target message path: email 1 | abcd1234@naver.com  오류 원인이유는 vue-i18n의 v9 버전 부터 @가 vue-i18n에서 사용하는 특수문자 중 하나가 되었고, nuxti18n은 vue-i18n v9 버전을 포함..
[Vue.js] Cannot find module 'vue-framework'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? Vetur(2792) 오류 해결하기 Vue3 + Nuxt3 기반의 프로젝트를 신규 구축하다가 외부 라이브러리를 추가하려고 하였더니 아래와 같은 오류가 발생하였다. 문제 코드 오류 내용Cannot find module 'vue-framework'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? Vetur(2792) 해결 방법tsconfig.json 파일에 아래 코드를 추가한다.{ ... "compilerOptions": { "moduleResolution": "node" }}
[Vue.js] Nuxt3에서 Less 전역으로 적용하기 / 변수 전역으로 사용하기 Nuxt3 프로젝트를 신규로 구축하면서 색상 등을 정의해 놓은 공통 Less 파일을 전역으로 설정하고 싶었다.Nuxt 공식 문서와 구글 검색을 통해 적용하다 보니 적용이 되었다!이제 각 SFC 스타일 마다 import를 하지 않아도 Less 공통 변수를 불러서 사용이 가능해졌다.export default defineNuxtConfig({ ... vite: { css: { preprocessorOptions: { less: { additionalData: '@import "~/assets/less/common.less";', }, }, }, },});  Referencehttps://nuxt.com/docs/getting-start..
[Vue.js] Nuxt3에서 외부 라이브러리 적용하기 Nuxt3 기반의 프로젝트를 신규 구축하면서 사내에서 직접 개발한 라이브러리 적용이 필요했다.기존의 Vue 프로젝트에서는 app.use()를 사용하였었는데, Nuxt3에서 어떻게 적용해야할까 찾아보았다. 적용 방법nuxtApp.vueApp.use()를 사용하면 된다.  Referencehttps://nuxt.com/docs/api/composables/use-nuxt-app#vueapp
[Storybook] Decorators의 viewMode 파라미터로 현재 창이 canvas인지 docs인지 확인하여 스타일 적용하기 ... export default { title: 'Components/MyComponents', parameters: { docs: { description: { component: 'MyComponents입니다.', }, }, }, decorators: [ (story, { viewMode }) => ({ components: { story }, setup() { return { viewMode }; }, methods: { getStyle() { return `height: ${viewMode === 'story' ? 1500 : 50}px` }, }, template: '', }), ], }; .... Reference https://storybook.js.org/docs/vue/writing-s..
video.js & <vue-video-player> 관련 링크 vue-video-player를 이용하여 개발을 진행하면서 참고하였던 사이트를 정리해보았다. 1. Video.js 공식사이트 🔗 데모를 통해 Video.js의 여러 옵션 및 API를 테스트해볼 수 있다. Video.js - Make your player yours Make your player yours with the internet's most popular open source video player framework videojs.com 2. Video.js 문서 🔗 Video.js의 여러 옵션 및 API에 관한 문서 Home | Video.js Documentation There are two categories of docs: Guides and API docs. Guides explain g..

티스토리툴바