<q-btn label="clear" @click="clearNuxtState()" />안녕하세요.  Nuxt 상태관리 : useState() 강의를 듣던 중 그대로 코딩을 따라했는데요.  clearNuxtState() 이 버튼을 생성하자 이 메서드에서 사용할수 없다고 빨간색으로 표시 되는데요. ERROR(vue-tsc) Property 'clearNuxtState' does not exist on type 'CreateComponentPublicInstanceWithMixins<ToResolvedProps<{}, {}>, { counter: Ref<number, number>; sameCounter: Ref<number, number>; }, {}, {}, {}, ComponentOptionsMixin, ... 19 more ..., {}>'. FILE /Users/Documents/workspace/onego-front/pages/about.vue:43:42 41 | </div> 42 | <div> > 43 | <q-btn label="clear" @click="clearNuxtState()" /> | ^^^^^^^^^^^^^^ 44 | </div> 45 | </div> 46 |[vue-tsc] Found 1 error. Watching for file changes.  이와 같이 에러가 나는데요..왜 나는지 도저히 모르겠네요.. 짐코딩님 repository에서 about 페이지 소스 그대로 복사해서 붙여놨는데도 해당부분에 빨간색이 나오더라고요 ㅠ  

Composition API 챕터 수강중인데요. 강의를 보다보니 강사님께서 <script> 내에서 ref()라던지 onMounted()라던지 메소드를 작성하고 무슨 키를 누르시면 위쪽에 자동으로 import 문이 작성되더라구요. 이건 무슨 기능인가요?

안녕하세요, 짐코딩님!항상 좋은 강의 제공해 주셔서 감사합니다. 덕분에 많은 도움을 받고 있습니다! 😊 Nuxt 3를 빌드할 때 기본적으로 production 모드로 진행되는 것으로 알고 있는데요.이를 local, dev, prod 등의 환경 기준으로 변경하려면 어떤 방식으로 설정하면 좋을까요?감사합니다! 🙏

안녕하세요~1번은 전달한 인자를 그대로 함수에서 받아서 의문이 안생기는데,2번은 인자를 전달하지 않았는데, 함수에서는 event 인자를 받네요? event 인자는 자동으로 사용가능한 개념인지요?답변 주시면 감사하겠습니다~ 1.전달 한 인자를 함수에서 그대로 받음printEventInfo('text', $event)printEventInfo(message, event) 2.인자를 전달하지 않았는데 함수에서는event를 인자로 받음@keyup="onKeyupHandler"onKeyupHandler(event) on<template> <button @click="printEventInfo('text',$event)">inline event handler</button> <input type="text" @keyup="onKeyupHandler"/> </template><script> export default{ const printEventInfo=(message, event)=>{ console.log(message) console.log(event.target) console.log(event.target.tagName) } const onKeyupHandler=(event)=>{ console.log(event.key) } } </script>

안녕하세요 짐코딩님,강의 잘 듣고 있습니다!강의 듣다가 궁금한게 있어서 질문드려요!피니아 persist 사용하면서 localStorage 또는 sessionStorage에 저장할 때 암호화해서 저장하는 방법이 있을까요?

<template> <div> <q-page padding> <div class='text-center q-py-xl'> <div class='text-h4'> {{ $route.path }} </div> </div> </q-page> </div> </template> <scipt lang='ts'> //아래 문장을 추가해야 링크클릭 가능 export default { }; console.log('prefetching-1'); </scipt> <script setup lang="ts"> </script> <style scoped> </style> 일단 각 prefetching-1,2,3 vue파일에 script 부분에 export default를 선언해야 강의로드맵 클릭했을때 이동이 되는데 왜그런가요?? 강의교안에는 그런게 없어서 영상에는 이동이 잘 되는데 말이죠.. <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-1"> <q-item clickable @click="navigate()">Prefetching Test 1</q-item> </NuxtLink> <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-2"> <q-item clickable @click="navigate()">Prefetching Test 2</q-item> </NuxtLink> <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-3"> <q-item clickable @click="navigate()">Prefetching Test 3</q-item> </NuxtLink>Prefetching에서 NuxtLink tag 안에 custom을 제거하면 prefetching이 정상적으로 되고 custom을 입력하면 prefetching이 되지 않는 것을 console.log에서 확인하였어요.. 혹시 왜그런지 아실까요? source : https://github.com/nhs0912/onego-front/tree/routing

질문삭제

안녕하세요. nuxt까지는 설정을 하였는데요 .잘 안되서 공식문서에 있는 순서대로 터미널로 그냥 만들어봤는데요.npx nuxi@latest init <project-name>https://nuxt.com/modules/quasar여기까지 초기페이지가 잘 나왔어요. 그런데 quasar를 공식문서에 있는 것 처럼 설치 해보니깐# Using npmnpm install quasar @quasar/extras npx nuxi@latest module add quasar ERROR  [nuxt] [request error] [unhandled] [500] __QUASAR_SSR_SERVER__ is not defined npm run dev 이후에 웹페이지 초기화면 새로 고침을 하면 이런 에러가 나오는데 혹시 어떤게 문제인지 알수 있나요? 

처음에 퀘이사 프로젝트를 생성하고, unplugin-vue-router가 동작하지 않아 적잖이 당황했습니다.   여러 테스트를 해본 결과... 다음과 같은 결과를 얻었습니다. 1/25일 기준, 최신 Vue/Vue Router 기준으로... "vue": "^3.5.0", "vue-router": "^4.5.0" unplugin-vue-router의 0.8.8까지만 호환되는 걸 확인했습니다. "unplugin-vue-router": "^0.8.8", 정확히, 0.9.0으로 하니까..chunk-NFXBJ25B.js?v=f99a8603:1268 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')위의 오류가 나더군요... 덧) 강사님 최신 unplug-vue-router 호환이슈좀 해결해 주세요.. ~~ ^^ 

하아 너무 답답하네요레거시나 베타버전 다 설치해봤고,충돌일까싶어서 한개씩만 설치도 해봤는데안됩니다...강의의 반만 따라가는 것 같아서 참 답답합니다...어떻게 해결방법이 없을까요?

질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 =>vue 설치 수강 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지=> terminal에 npm~을 입력했는데 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오 라고 표기됨 작성하신 코드 및 오류 스크린샷 npm i -g @vue/cli 을 함께 첨부해주시면 좋아요!

안녕하세요~ 웹 레이아웃 구성 default.vue 파일의 코드 일부분 입니다.route.meta? 에서 ?물음표개념이 어떻게 될까요?지워도 작동해서 질문 드립니다.답변 주시면 감사하겠습니다. const pageContainerStyles = computed(() => ({ maxWidth: route.meta?.width || '1080px', margin: '0 auto', }));  

여러 개의 HTML 요소를 v-if로 조건부 렌더링을 하고 싶다면 template 태그로 감싸고 v-if를 사용하여 렌더링 하면 된다고 말씀해주셨는데, template 태그가 아닌 div, ul 등으로 감싸도 동일하게 작동하는 것을 확인했습니다. 기존 React를 사용하는 제 입장에서는 template 태그를 사용하지 않고 후자와 같은 방법으로 조건부 렌더링을 걸곤 했는데,혹시 여러 개의 요소를 하위 요소로 담고 있는 상위 일반 HTML 태그에 v-if를 사용하는 것과, template으로 묶어 사용하는 것에 차이가 있는지 질문드립니다!

크롬 확장 프로그램 vue devtools 이 안되서 강의 듣는데 좀 답답하네요 ㅠㅠ<app-content v-bind:propsnum="message"></app-content>이렇게 적으면 hi가 나오고<app-content v-bind:propsnum="num"></app-content>이렇게 적으면 10이 나오고근데 '<h1> {{propsnum}} {{propsdata}}</h1>',이렇게 두개는 안나오고...어렵습니당..직접 데이터 확인해보면 좋은데 왜 확장프로그램이 안될까요....ㅠㅠㅠ 레거시로 깔았는데도 개발자도구에서 vue탭이 안보여요,.. <app-content v-bind:propsnum="message"></app-content> </div> let appContent={ template : '<h1> {{propsnum}} {{propsdata}}</h1>', props:['propsnum','propsdata'] } new Vue({ el: '#app', components:{ 'app-header' : appHeader, 'app-content' : appContent }, data:{ message : 'hi', num:10 } })

component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20(anonymous)@component.html:11""콘솔 에러가 뜹니다..

강의 동영상화면이 안떠요,, 이전 이후 강의는 뜨는데..왜그런걸까요?

<img src="https://i.ibb.co/XbsPPmQ/image.png" />이 사진 주소 바뀐거같아요

수업 시간에 보면서 따라하고 있는데,AppCard.vue 파일에서<slot :child-messag="childMessag" :hello-messag="helloMessag">#body</slot>위의 코드처럼 :hello-messag 로 하는 게 맞는 건가요?아니면 강의 화면처럼hello-messag로 하는 게 맞는 건가요?(16:43 강의 화면 참고) 처음에만 : 쓰고 그 이후 부터는 생략이 가능한 걸 까요??

헷갈리시는분들 제목 참조용

안녕하세요. component에서 props와 slots에 동일한 name을 갖고 있을 때,slot 형태로 전달해도 무시되고 props만 인식됩니다.혹시 이럴 때 slot | string 받을 수 있는 방법이 있을까요? <slot name="prefix" /> props: { prefix: { type: String .... }}