Vue를 쓰면서 함께 Vuetify도 쓰고 있는데 쓰다보니 슬롯을 활용하는 VMenu 컴포넌트를 쓰게 됐는데 동작이 어떻게 되는지 헷갈려서 정리하는 김에 글을 쓴다. 공식 문서로 봤을 때는 React의 children 이랑 비슷한 느낌으로 알았는데 제대로 쓰려고 하니 오래돼서 그런지 헷갈린다.슬롯이란?슬롯(slot)은 Vue에서 제공하는 기능으로 컴포넌트의 재활용성과 유연성을 제공한다. 형태는 정해져 있고 내부 컨텐츠가 달라지는 경우에 유용하게 쓸 수 있다. 공식 문서의 예를 빌리면 다음과 같다. 위처럼 레이아웃이 정해져 있고 내부 컨텐츠가 동적으로 변해야 하는 상황에 슬롯을 사용하기 적합하다. 이런 경우에 슬롯을 적용하면 다음과 같이 사용할 수 있다. ..

Basic Vue using Component Vue에서 기본적으로 한 컴포넌트를 다른 컴포넌트에서 쓰려면 import를 해야 한다. 이런 import 문 없이 template에서 사용한 컴포넌트를 자동 import 해주는 플러그인이 unplugin-vue-components 이다.Using unplugin-vue-components 이렇게 되면 불필요한 import 를 원천적으로 막아주기 때문에 빌드 파일 크기도 줄일 수 있다.자세한 사항은 공식 깃허를 참고하기 바란다.https://github.com/unplugin/unplugin-vue-components GitHub - unplugin/unplugin-vue-components: 📲 On-demand components..

앞선 글과 같은 이유로 해당 플러그인을 알아보도록 한다.https://somuchthings.tistory.com/382 [Vue.js] Unplugin-Vue-Router포트폴리오의 프론트엔드 파트를 Vue & Vuetify & Pinia & Vite 스택으로 만들기로 해서 Vuetify에서 제공하는 프로젝트 생성 커맨드로 프로젝트를 만들었다. 설치하고 나니 vite.config.js와 route에 내가 모somuchthings.tistory.comBasic Vue ImportVue에서는 기본적으로 API를 사용할 때 'vue'에서 import 해서 사용한다.import { computed, ref } from 'vue'const count = ref(0)const doubled = computed((..

포트폴리오의 프론트엔드 파트를 Vue & Vuetify & Pinia & Vite 스택으로 만들기로 해서 Vuetify에서 제공하는 프로젝트 생성 커맨드로 프로젝트를 만들었다. 설치하고 나니 vite.config.js와 route에 내가 모르는 플러그인들이 이미 적용되어 있었다. 이제 Vue를 배운지 이틀 정도인데 모르는 것들이 적용되어 있어 당황스러웠고 하나씩 찾아보았다. 그 중 첫 번째로 눈에 띈 것이 unplugin-vue-router 였고 공식문서 기반으로 정리해보도록 한다.Basic Vue routingVue에서는 공식적인 라우터 기능을 Vue-Router에서 제공한다. 여러 페이지 컴포넌트들을 만들어놓고 이것들을 라우터에 등록해야 한다. 기본적인 라우터 코드는 다음과 같다.import { cr..