Skip to content

Instantly share code, notes, and snippets.

Avatar

Thorsten Lünborg LinusBorg

View GitHub Profile
@LinusBorg
LinusBorg / 0-vue3-typescript-caveats.md
Last active Dec 22, 2020
Vue 3 Typescript Caveats
View 0-vue3-typescript-caveats.md

About this collection

This gist is a work in progress. It's goal is to collect information about possible pitfalls when using Vue 3's proxy-base reactivity and Typescript, including solutions/remedies/workarounds.

Ultimately, the goal is to turn this into a part of the Vue documentation.

TOC

  1. Leaking this from the constructor, i.e. in async operations.
  2. ref()/reactive() unwrapping loses private fields type information
@LinusBorg
LinusBorg / .babelrc
Created Jun 13, 2017 — forked from SeanJM/.babelrc
TypeScript, VueJS and JSX webpack configuration
View .babelrc
{
"presets": [],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs"]
}
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@LinusBorg
LinusBorg / postcss.config.js
Created Mar 31, 2019
purge css with tailwind and Vue
View postcss.config.js
// Props: https://dev.to/_mikhailbot/vue-cli-3-tailwindcss-and-purgecss-1d1k
const tailwindcss = require('tailwindcss')
const purgecss = require('@fullhuman/postcss-purgecss')
const autoprefixer = require('autoprefixer')
const postcssImport = require('postcss-import')
module.exports = {
plugins: [
postcssImport,
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@LinusBorg
LinusBorg / module.js
Last active Mar 9, 2020
Compiler Module for vue-loader to remove data-test attributes
View module.js
/*
*
* Usage:
* compilerModules: [
* createDataAttributeRemover(['test', 'test-data'])
* ]
*
*/
function createDataAttributeRemover(attributes = []) {
return {
@LinusBorg
LinusBorg / Masonry.vue
Last active Jun 24, 2019
Example of proposed Vue setup method
View Masonry.vue
<template>
<div ref="container">
<transition-group name="flip">
<div
v-for="item in gridItems"
:key="item.key"
:style="{ backgroundImage: item.css, height: item.height }"
/>
</transition-group>
</div>
@LinusBorg
LinusBorg / Form.vue
Last active Jun 24, 2019
Consuming function-based plugin in object-based Vue component
View Form.vue
<template>
<form>
<input type="text" v-model="data.name" />
<span v-if="errors.name">{errors.name.msg{</span>
<span v-else>{{capsName}}</span>
<input type="number" v-model.number="data.age" />
<span v-if="errors.age">{errors.age.msg{</span>
</form>
</template>