Vue를 사용하더라도 캘린더나 이런부분들은 사용해야 하기때문에 기존에 jquery나 js를 사용할때 잘 쓰던 datepicker를 그대로 사용하려고 했다. 설치하는 부분의 경우에는 공식문서에서 자세하게 설명해주고 있기 때문에 간단하게만 정리하였다. Vue프로젝트에 date-picker 적용하기. 설치 npm install @vuepic/vue-datepicker main.js에 컴포넌트 및 css 추가적용. import VueDatePicker from '@vuepic/vue-datepicker'; import '@vuepic/vue-datepicker/dist/main.css'; createApp(App) .component('VueDatePicker', VueDatePicker) .use(router..

Toast alert 란 말그대로 토스트기에 빵을 넣으면 따악~ 튀어나오는 형태의 알림창을 말한다. 실제로 제공하는 깃허브에 들어가면 보이는 모습은 다음과 같다. 기존 프로젝트에서 PrimeVue에서 제공하는 Toast alert창을 사용하고자 했으나...뭔가 정상동작하지 않았다. 별도의 플러그인을 설치하여 Vue3에서 js에 사용하고자 하는 형태로 가공하여 사용하려고 한다. Vue3를 지원하는 Toast (MIT 라이센스) (2년전이 최종 git수정) Vue-Toastification Vue-Toastification vue-toastification.maronato.dev 깃 주소 https://github.com/Maronato/vue-toastification GitHub - Maronato/vu..

Vue에서 Pinia를 사용하여 정보를 관리하는 경우에 새로고침을 하는 경우 저장된 데이터가 날아간다. 새로고침시 store값 날아가는경우 pinia-persistedstate를 사용하여 초기화 방지가 가능하다. localStore에 저장 or 쿠키에 저장 선택가능하다 검색키워드 pinia-persistedstate store setup pinia-persistedstate with composition api 등등 참고중인 페이지 Composition API on pinia-plugin-persistedstate? From the vuejs community on Reddit Explore this post and more from the vuejs community www.reddit.com 공식사이..

vite 사용시 좋은점 개발중엔 ES Import를 직접지원 하고, 브라우저에서 이용하여 favicon.ico 가 명시된 부분도 변경해라. 기존에는 public 폴더 내부에 존재하던 index.html파일을 외부로 꺼내라. import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { fileURLToPath } from 'url'; import path from 'path'; const filename = fileURLToPath(import.meta.url); const pathSegments = path.dirname(filename); export default defineConfig({ plugins: [vu..

상태관리 라이브러리의 경우 Vuex와 Pinia가 있다. 2개를 비교하는 글의 경우 인터넷에 많이 있기 때문에 검색을 추천한다. 간단한 설명으로는 pinia가 이후에 나온 것이므로 조금 더 직관적이고 Vue3에서 주로 사용하는 Composition API를 기준으로 동작한다는 것이다. 그리고 다중 store를 지원한다. 타입스크립트 지원. Composition API 지원. (Vue3 기준 common) 등이 있다. 설치 npm install pinia 현재프로젝트기준 "pinia": "^2.1.7", 이 설치됨 main.js 에 추가 적용 import { createPinia } from 'pinia'; const pinia = createPinia(); createApp(App).use(pinia)...

많은 화두가 되는 2개가 있다. 바로 Vuex와 Pinia이다. 여러 블로그 들에서 이미 비교를 잘 해둔게 있었고 개인적인 생각을 정리하기 위해서 그냥 작성한 글입니다. Vue 상태관리 라이브러리이고 Vue 2버전대에선 Vuex가 주로 사용되었고 Vue3버전에서는 Pinia를 주로 사용하는 것 같다. 간단하게 차이점을 말하자면 Pinia에서는 composition api와 option 둘다 지원하는데 반해 Vuex는 option형태만 지원하는듯 하다. 또한 state값을 변경하기 위해서는 Vuex에선 mutation이라고 따로 명시하는 곳이 있고 거기서만 변경이 가능한데 Pinia에서는 action에서 바로 state를 변경 할 수 있다.Vuex에서 별도로 분할되어 있는 영역 1개를 줄여버린것이다. (사..