본문 바로가기

bootstrap-vue3

[Vue] 페이지 새로고침 기능을 만들자! (on-off 기능 추가) bootstrap-vue 를 활용해서 새로고침 아이콘(b-icon) 으로 새로고침을 on-off 하는 기능을 만들자! 이제 간단한 조건문을 곁들인 컴포넌트 개발은 많이 헤매지 않고 할 수 있는 것 같다. 역시 백문이 불여일타 🤓 2021. 8. 30.
[Vue] bootstrap-vue 에서 icon 을 사용했는데 왜 안나오지?? (b-icon 삽질 후기) 네. 결론부터 말하면 삽질 맞습니다. 공홈 가이드를 백번 읽고, 구글링하면서 수정 -> 빌드 -> 확인 루프만 7시간 내내 돌린 삽질 후기 입니다 🤭 우선 특정 아이콘을 import 하지 않고 모두 불러와서 (all import) 사용하는 방식을 사용하고자 공식 홈페이지 (https://bootstrap-vue.org/docs/icons) 에 나와있는 'Module bundlers' 섹션을 정독했다. 그 런 데 이렇게 영역만 잡히고 아이콘이 노출되지 않았다. (not showing) 심지어 `b-icon` 컴포넌트를 찾을 수 없다는 오류메세지 까지 만나게 되는데.. vue.runtime.esm.js?ff9b:619 [Vue warn]: Unknown custom element: - did you regi.. 2021. 8. 23.
[Vue] b-icon 전역 컴포넌트로 등록해서 별도로 관리하기 vue + bootstrap 으로 페이지를 관리하고 있었고, 필요한 아이콘은 bootstrap 에서 제공해주는 아이콘(b-icon) 을 사용하고 있었다. 디스플레이 아이콘을 노출합니다. 그러다보니 각 컴포넌트 별로 아이콘을 사용하기 위한 위 코드가 중복으로 들어가있었고, 중복을 제거하기 위해 b-icon 을 전역 컴포넌트로 등록해서 별도로 관리하기로 결심했다. 🌝 위와 같이 전역 컴포넌트로 사용 할 Icon.vue 파일을 생성해주고, (props 로 icon 을 노출하도록 했는데 이게 최선인지는 잘 모르겠다..) // 전역 컴포넌트로 사용하려고 만든 Icon.vue import import Icon from './components/Icon' // 전역 컴포넌트로 사용하기 위해서 선언 Vue.compon.. 2021. 8. 20.