Markus Oberlehner

vuex-map-fields. Enable two-way data binding for form fields saved in a Vuex store

vue-lazy-hydration. Lazy Hydration of Server-Side Rendered Vue.js Components

node-sass-magic-importer. Custom node-sass importer for selector specific imports, module importing, globbing support and importing files only once.

perfundo. a pure CSS lightbox (now with JavaScript).

how-to-structure-a-complex-vuex-store. This is an example project for the following article: https://markus.oberlehner.net/blog/how-to-structure-a-complex-vuex-store/

transition-to-height-auto-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/

goodbye-webpack-building-vue-applications-without-webpack. This is an example project for the following article: https://markus.oberlehner.net/blog/goodbye-webpack-building-vue-applications-without-webpack/

distributed-vue-applications-loading-components-via-http. This is an example project for the following article: https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/

eleventy-preact. Build progressively enhanced websites wit Eleventy and Preact

dynamic-vue-layout-components. This is an example project for the following article: https://markus.oberlehner.net/blog/dynamic-vue-layout-components/

advanced-vue-component-composition-with-container-components. This is an example project for the following article: https://markus.oberlehner.net/blog/advanced-vue-component-composition-with-container-components/

setting-up-a-vue-project-with-webpack-4-and-babel-7. This is an example project for the following article: https://markus.oberlehner.net/blog/setting-up-a-vue-project-with-webpack-4-and-babel-7/

vue-router-page-transitions. This is an example project for the following article: https://markus.oberlehner.net/blog/vue-router-page-transitions/

storyblok-migrate. Storyblok schema migrations

building-a-modal-dialog-with-vue-and-vuex. This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-modal-dialog-with-vue-and-vuex/

building-renderless-components-to-handle-crud-operations-in-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/building-renderless-components-to-handle-crud-operations-in-vue/

how-to-pre-render-vue-powered-websites-with-webpack. This is an example project for the following article: https://markus.oberlehner.net/blog/how-to-pre-render-vue-powered-websites-with-webpack/

skeleton-loading-animation-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/skeleton-loading-animation-with-vue/

well-composed-frontend. This is an example app to show how to build a flexible and modular frontend. The main technologies used are Vue together with Vuex and Nuxt.js in combination with the node-sass-magic-importer.

using-the-google-maps-api-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/using-the-google-maps-api-with-vue/

talk-vitest-cypress. TypeScript

collectorium. pure CSS tabs.

vue-application-structure-and-css-architecture. This is an example project for the following article: https://markus.oberlehner.net/blog/vue-application-structure-and-css-architecture/

combining-graphql-and-vuex. This is an example project for the following article: https://markus.oberlehner.net/blog/combining-graphql-and-vuex/

book-good-tests-app. TypeScript

how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications. This is an example project for the following article: https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/

building-a-date-input-component-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-date-input-component-with-vue/

implementing-a-simple-middleware-with-vue-router. This is an example project for the following article: https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/

replicating-the-twitter-tweet-box-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/replicating-the-twitter-tweet-box-with-vue/

talk-good-tests. TypeScript

lazy-load-vue-components-when-they-become-visible. This is an example project for the following article: https://markus.oberlehner.net/blog/lazy-load-vue-components-when-they-become-visible/

distributed-vue-applications-pushing-content-and-component-updates-to-the-client. This is an example project for the following article: https://markus.oberlehner.net/blog/distributed-vue-applications-pushing-content-and-component-updates-to-the-client/

visual-regression-tests-for-vue-applications-with-jest-and-puppeteer. This is an example project for the following article: https://markus.oberlehner.net/blog/visual-regression-tests-for-vue-applications-with-jest-and-puppeteer/

css-selector-extract. Extract certain CSS selectors form (S)CSS code.

setting-up-tailwind-css-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/setting-up-tailwind-css-with-vue/

building-a-simple-content-slider-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-simple-content-slider-with-vue/

node-sass-package-importer. Custom importer for node-sass to import packages from the `node_modules` directory.

implementing-an-authentication-flow-with-passport-and-netlify-functions. This is an example project for the following article: https://markus.oberlehner.net/blog/implementing-an-authentication-flow-with-passport-and-netlify-functions/

building-custom-multi-option-form-components-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/building-custom-multi-option-form-components-with-vue/

building-a-parallax-scrolling-effect-component-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-parallax-scrolling-effect-component-with-vue/

reusable-functional-vue-components-with-tailwind-css. This is an example project for the following article: https://markus.oberlehner.net/blog/reusable-functional-vue-components-with-tailwind-css/

using-location-data-with-vue-and-open-street-map. This is an example project for the following article: https://markus.oberlehner.net/blog/using-location-data-with-vue-and-open-street-map/

vue-3-composition-api-data-fetching-composable. Vue

lazy-loading-responsive-images-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/lazy-loading-responsive-images-with-vue/

testing-vuex-powered-vue-components-with-jest. This is an example project for the following article: https://markus.oberlehner.net/blog/testing-vuex-powered-vue-components-with-jest/

building-a-pre-rendered-website-with-nuxt-and-storyblok. This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-pre-rendered-website-with-nuxt-and-storyblok/

storyblok-cloudinary-assets. Storyblok Cloudinary Assets is a Storyblok field-type plugin which makes it possible to use Cloudinary for managing assets in the headless CMS Storyblok

storyblok-meta-image. A Storyblok field-type plugin which provides an image field with meta data like width, height, alt and title texts and the images dominant color attached to it

vue-functional-css-module-components. This is an example project for the following article: https://markus.oberlehner.net/blog/vue-functional-base-components-powered-by-css-modules/

vue-form-validation-with-vuelidate. This is an example project for the following article: https://markus.oberlehner.net/blog/vue-form-validation-with-vuelidate/

abomination-a-concept-for-a-static-html-dynamic-javascript-hybrid-application. This is an example project for the following article: https://markus.oberlehner.net/blog/abomination-a-concept-for-a-static-html-dynamic-javascript-hybrid-application/

building-a-simple-ken-burns-slider-with-vue. This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-simple-ken-burns-slider-with-vue/

retry-until-online. Delay the execution of a function until the browser is back online.

automatic-spa-ftp-deploys-with-circleci. This is an example project for the following article: https://markus.oberlehner.net/blog/automatic-spa-ftp-deploys-with-circleci/

route-model-binding-with-vue-and-vuex. This is an example repository created for the following blog article: https://markus.oberlehner.net/blog/route-model-binding-with-vue-and-vuex

talk-git-master-class. This is an example repository for my talk Git Master Class

building-a-static-site-with-storyblok-and-gridsome. This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-static-site-with-storyblok-and-gridsome/

article-testing-dsl. JavaScript