Discover maoberlehner/collectorium Open Source project

Lazy Hydration of Server-Side Rendered Vue.js Components

1,415

vue-lazy-hydration

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

1,187

node-sass-magic-importer

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

293

how-to-structure-a-complex-vuex-store

a pure CSS lightbox (now with JavaScript).

187

perfundo

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

183

transition-to-height-auto-with-vue

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

105

goodbye-webpack-building-vue-applications-without-webpack

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

distributed-vue-applications-loading-components-via-http

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

dynamic-vue-layout-components

Build progressively enhanced websites wit Eleventy and Preact

eleventy-preact

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

advanced-vue-component-composition-with-container-components

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

vue-router-page-transitions

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/

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/building-a-modal-dialog-with-vue-and-vuex/

building-a-modal-dialog-with-vue-and-vuex

Storyblok schema migrations

storyblok-migrate

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

building-renderless-components-to-handle-crud-operations-in-vue

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

how-to-pre-render-vue-powered-websites-with-webpack

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

skeleton-loading-animation-with-vue

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

using-the-google-maps-api-with-vue

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.

well-composed-frontend

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

vue-application-structure-and-css-architecture

talk-vitest-cypress

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

combining-graphql-and-vuex

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

implementing-a-simple-middleware-with-vue-router

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

building-a-date-input-component-with-vue

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/

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/replicating-the-twitter-tweet-box-with-vue/

replicating-the-twitter-tweet-box-with-vue

talk-good-tests

book-good-tests-app

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

lazy-load-vue-components-when-they-become-visible

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/

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/visual-regression-tests-for-vue-applications-with-jest-and-puppeteer/

visual-regression-tests-for-vue-applications-with-jest-and-puppeteer

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

setting-up-tailwind-css-with-vue

Extract certain CSS selectors form (S)CSS code.

css-selector-extract

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

building-a-simple-content-slider-with-vue

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

node-sass-package-importer

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

implementing-an-authentication-flow-with-passport-and-netlify-functions

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

building-a-parallax-scrolling-effect-component-with-vue

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

using-location-data-with-vue-and-open-street-map

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

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

building-custom-multi-option-form-components-with-vue

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

lazy-loading-responsive-images-with-vue

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

testing-vuex-powered-vue-components-with-jest

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

reusable-functional-vue-components-with-tailwind-css

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

building-a-pre-rendered-website-with-nuxt-and-storyblok

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

storyblok-meta-image

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-cloudinary-assets

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

vue-form-validation-with-vuelidate

This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-website-with-vue-the-storyblok-visual-editor-and-netlify/

building-a-website-with-vue-the-storyblok-visual-editor-and-netlify

This is an example project for the following article: https://markus.oberlehner.net/blog/building-landing-pages-with-vue-and-a-headless-cms/

building-landing-pages-with-vue-and-a-headless-cms

vue-single-file-component-factory

Compare the loading performance of two or more websites or website variations.

loading-comparison

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

building-a-simple-ken-burns-slider-with-vue

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/

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/vue-functional-base-components-powered-by-css-modules/

vue-functional-css-module-components

Runtime Bundling of JavaScript Assets

runtime-bundler

This is an example repository for my talk Git Master Class

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/

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

automatic-spa-ftp-deploys-with-circleci

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

route-model-binding-with-vue-and-vuex

This is an example repository created for the following blog article: https://markus.oberlehner.net/blog/2017/03/building-a-simple-database-abstraction-with-typescript/

typescript-database-abstraction

This is an example repository created for the following blog article: https://markus.oberlehner.net/blog/acceptance-testing-with-nightwatch-and-cucumber-setup/

acceptance-testing-with-nightwatch-cucumber-and-browserstack

article-testing-dsl

Custom node-sass importer to allow you to use glob syntax in imports.

node-sass-glob-importer

building-a-store-finder-with-storyblok-and-vue

vue-xstate-experiments

Filter certain elements from SCSS code.

node-sass-filter-importer

This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-renderless-recaptcha-v3-form-component-with-vue/

building-a-renderless-recaptcha-v3-form-component-with-vue

This is an example project for the following article: https://markus.oberlehner.net/blog/how-to-use-graphql-with-vue-apollo-components-and-netlify-functions/

how-to-use-graphql-with-vue-apollo-components-and-netlify-functions

This is an example project for the following article: https://markus.oberlehner.net/blog/crazy-powerful-nightwatch-cucumber-step-definitions/

crazy-powerful-nightwatch-cucumber-step-definitions

This is an example project for the following article: https://markus.oberlehner.net/blog/creating-pdf-invoices-with-airtable-vue-and-puppeteer/

creating-pdf-invoices-with-airtable-vue-and-puppeteer

This is an example project for the following article: https://markus.oberlehner.net/blog/building-a-serverless-comment-system-with-netlify-functions-storyblok-and-vue/

building-a-serverless-comment-system-with-netlify-functions-storyblok-and-vue

storyblok-augmented-image

storyblok-list

visual-regression-testing-with-nightwatch-and-cucumber

Import only certain CSS selectors form a file.

node-sass-selector-importer

Warum npm scripts (manchmal) voll OK sind.

talk-npm-scripts

HTML

building-a-custom-storyblok-field-type-plugin-with-vue

This is an example project for the following article: https://markus.oberlehner.net/blog/building-custom-storyblok-field-type-plugins-with-vue/

This is an example project for the following article: https://markus.oberlehner.net/blog/controlling-the-lego-mindstorms-nxt-with-nodejs-its-alive/

mindstorms-nxt-node

article-nuxt-sqlite-vector

This is an example project for exploring how to build headless CMS powered websites with Nuxt.js.

headless-cms-nuxt

This is an example repository created for the following blog article: https://markus.oberlehner.net/blog/unit-testing-vue-single-file-components-with-ava/

unit-testing-vue-components-with-ava

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

dynamically-loading-svg-icons-with-vue

good-vue-tests-q-and-a

vue-style-provider

This is an example project for the following article: https://markus.oberlehner.net/blog/network-stubs-and-timers-with-nightwatch-and-cucumber

network-stubs-and-timers-with-nightwatch-and-cucumber

This is an example project for the following article: https://markus.oberlehner.net/blog/implementing-a-gdpr-consent-workflow-with-vue/

implementing-a-gdpr-consent-workflow-with-vue

vue-nested-default-props

This is an example project for the following article: https://markus.oberlehner.net/blog/automated-acceptance-testing-with-cypress-and-vue-setup

automated-acceptance-testing-with-cypress-and-vue