{"id":10302,"date":"2024-10-18T16:36:36","date_gmt":"2024-10-18T14:36:36","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=10302"},"modified":"2024-10-20T18:35:08","modified_gmt":"2024-10-20T16:35:08","slug":"vue-cookbook","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2024\/10\/18\/vue-cookbook\/","title":{"rendered":"Vue &#8211; Cookbook"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Responsive Design<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">React on Size Change<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script>\nexport default {\n    data() {\n        return {\n            isMobile: false,\n            isDesktop: false,\n\n            windowWidth: window.innerWidth,\n            windowHeight: window.innerHeight,\n        };\n    },\n\n    created() {\n        this.updateWindowSize();\n        window.addEventListener('resize', this.updateWindowSize);\n    },\n\n    methods: {\n        updateWindowSize() {\n            \/\/ console.log(\"updateWindowSize())\");\n\n            this.windowWidth = window.innerWidth;\n            this.windowHeight = window.innerHeight;\n            this.checkIsMobile();\n        },\n\n        checkIsMobile() {\n            this.isMobile = this.windowWidth &lt;= 768;\n            \/\/ console.log(`checkIsMobile(): windowWidth = ${this.windowWidth} isMobile=${this.isMobile}`)\n        },\n\n        beforeUnmount() {\n            console.log(\"beforeUnmount()\");\n\n            window.removeEventListener('resize', this.updateWindowSize);\n        },\n\n    },\n};\n&lt;\/script><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Debugging<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script setup>\nimport {\n    onActivated,\n    onBeforeMount,\n    onBeforeUnmount,\n    onBeforeUpdate,\n    \/*  onCreated, *\/\n    onDeactivated,\n    onErrorCaptured,\n    onMounted,\n    \/*  onRenderTracked,*\/\n    onRenderTriggered,\n    onScopeDispose,\n    onServerPrefetch,\n    onUnmounted,\n    onUpdated,\n    \/*  onWatcherCleanup, *\/\n\n} from 'vue';\n\nonActivated(() => { console.log('onActivated() called'); });\nonBeforeMount(() => { console.log(`onBeforeMount():`) })\nonBeforeUnmount(() => { console.log('onBeforeUnmount() called'); });\nonBeforeUpdate(() => { console.log(`onBeforeUpdate():`) })\nonDeactivated(() => { console.log('onDeactivated() called'); });\nonErrorCaptured((err, instance, info) => { console.log('onErrorCaptured() called'); console.error(err); return false; });\nonMounted(() => { console.log(`onMounted():`) })\nonRenderTriggered((e) => { console.log('onRenderTriggered() called', e); });\nonUnmounted(() => { console.log(`onUnmounted():`) })\nonUpdated(() => { console.log('onUpdated() called'); });\nonScopeDispose(() => { console.log('onScopeDispose() called'); });\nonServerPrefetch(() => { console.log('onServerPrefetch() called'); });\n\n&lt;\/script><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Design React on Size Change Debugging<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10302","post","type-post","status-publish","format-standard","hentry","category-allgemein"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/10302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=10302"}],"version-history":[{"count":2,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/10302\/revisions"}],"predecessor-version":[{"id":10304,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/10302\/revisions\/10304"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=10302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=10302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=10302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}