728x90
vue3 검색 결과
14 개의 검색 결과가 있습니다.
Web/vue.js

nuxt3 환경변수

환경변수 사용하기 서버 환경이 바뀌거나, 특히 개발환경과 배포 환경의 특정 변수를 한번에 지정하기 위해서 환경변수를 사용하면 편한 경우가 있다. 이를 위한 방법 정리. nuxt config nuxt3 공식 페이지에는 .env 파일에 대한 설명이 없어서 nuxt2의 configuration 설명에서 참고했다. config file 설정 nuxt의 환경변수에 관한 설정은 nuxt.config.js 혹은 .ts 파일에서 지정할 수 있다. js이건 ts이건 상관은 없는 것 같다. import { defineNuxtConfig } from "nuxt/config"; export default defineNuxtConfig({ runtimeConfig: { public: { apiBase: "변수입력", }, },..

2023. 6. 26. 09:24
Web/vue.js

[vue3] nuxt3 + pinia 사용법

0. 들어가기 -. state 관리 패키지인 pinia를 nuxt3에서 써보자. -. 이전에는 vuex를 써왔는데, 거의 반 강제로 피니아로 변경하게 되었다. 1. 설치 -. pinia의 vue 3.2.45 버전에 대응이 아직 안되었는지 vue 버전이 맞지 않는다고 설치가 안되었다. npm ERR! While resolving: undefined@undefined npm ERR! Found: vue@3.2.45 npm ERR! node_modules/vue npm ERR! peer vue@"^3.2.45" from @nuxt/vite-builder@3.0.0 npm ERR! node_modules/@nuxt/vite-builder npm ERR! @nuxt/vite-builder@"3.0.0" from ..

2022. 12. 16. 08:54
Web/vue.js

[vue/vuetify] vuetify component - app-bar, content/main, footer

0. 들어가기 -. vuetify의 components들을 적절히 조합해서 웹페이지 레이아웃을 구성해 본다. -. navication bar / footer를 분리해서 template 구성하기. 1. 상단 app-bar 만들기 (navigation bar) -. navigation bar 혹은 app bar로 부르는 상단바를 만들어보자. app-bar의 예제 코드를 간단하게 복사해서 붙여넣으면 끝난다. v-app-bar -. 간단하게 왼쪽 햄버거 메뉴바, 페이지 타이틀, 그리고 홈/로그인 버튼을 만들어봤다. Erepublik Tools HOME LOGIN 2. v-card로 본문 채우기 -. 그리고 v-card 컴포넌트를 이용해 포함될 기능들을 디스플레이 하려 했는데, 상단 앱바가 본문 내용을 덮어버린다..

2022. 12. 11. 22:47
Web/vue.js

[vue3/nuxt3/vuetify3] nuxt3 + vuetify3 사용방법

0. 들어가기 -. 스타일 엔진이 필요하니, 이제 vuetify3를 공부해야지... -. 아직 vuetify는 정식 release가 되지 않았다. 23년 1분기에 제대로 개발 된 버전 릴리즈가 목표라고 함. 그렇다고, 지금 당정 못쓰는건 아니니 꾸역꾸역 따라해 보자. -. vue3 + vuetify3는 아주 간단하게 설치할 수 있는데, 아직 vue3 자체가 미완성이라 그런가 nuxt3 + vuetify3 사용 시 약간 복잡하게 진행해야 한다. 다행히 관련된 블로그 글을 발견해서 성공함. 1. vue cli를 이용한 설치방식 시도 (nuxt 사용 안할 시) -. nuxt를 사용하지 않을 경우, vue-cli로도 plugin 추가가 가능하다. vue add vuetify -. 하지만 nuxt 프레임웍 사용 ..

2022. 12. 5. 16:59
Web/vue.js

[vue/nuxt] nuxt3 layout 사용

0. 들어가기 -. jinja2와 같이, nuxt에서 제공하는 template/레이아웃 기능을 사용해본다. 1. layout 사용 목적 -. 웹사이트를 구성하다 보면, 아래 그림처럼 모든 웹페이지에서 공통으로 사용하는 영역이 존재한다. -. 보통 header, navigation bar, footer는 공통으로 사용하고, 그 안의 article 영역만 바꿔가면서 디스플레이를 하는데, 다시말하면, 매번 반복되는 부분을 매번 다시 작성하는 것은 리소스 낭비.. 이므로, template을 호출하는 방식으로 처리하는 것이 합리적이다. 2. Nuxt3 에서 layout 적용하기 -. 사실 다른 엔진에서도 많이 사용하는 기능이라, 레이아웃 적용 자체가 어려운 건 없다. Nuxt3 layout documentatio..

2022. 12. 1. 23:24
Web/vue.js

[vue/nuxt] nuxt3 기본 사용법

0. 들어가기 -. vue3에 적용 가능한 nuxt3 기본 사용법 연습 -. 와.. 벌써 8개월이 지났어. 1. nuxt3 설치 -. 항상 그렇듯이, 설치는 쉽다. 아래 한 줄 입력하면 nuxt 기본 package.json 파일이 포함된 폴더가 생성된다. npx nuxi init 폴더명 -. 이후 해당 폴더에 들어가서 패키지 설치를 해주면 끝. cd invit_nuxt npm install -. 나는 invit_nuxt 폴더에 기본 세팅을 했고, 그 결과로 아래와 같은 폴더 구조가 생성된다. -. 이후, vue3의 기본 서버 패키지인 vite를 실행하면 nuxt3의 기본 페이지를 확인할 수 있다. npm run dev 2. Page Routing -. Route 파일을 따로 설정해줘야 하는 바닐라 vue..

2022. 11. 27. 20:19