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
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
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 / 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>
@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 / Presenter.vue
Last active Jun 15, 2019
Pseudocode example for a reddit discussion about the proposed Vue 3 composition RFC
View Presenter.vue
<template>
<!-- eslint-disable -->
<spinner v-if="showSpinner"></spinner>
<presentation-player v-else :page-data="$store.state.presentationPageData"></presentation-player>
</template>
<script>
/* eslint-disable */
import webSocketService from 'services/websocket'
import { usePresentation } from './base'
@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,
@LinusBorg
LinusBorg / chunksPlugin.js
Last active Mar 3, 2019
Adding a local plugin to a Vue CLI preset
View chunksPlugin.js
// Local Plugin:
// https://cli.vuejs.org/guide/plugins-and-presets.html#project-local-plugin
// See also:
// https://cli.vuejs.org/dev-guide/plugin-dev.html#modifying-webpack-config
module.exports = api => {
const webpack = require('webpack')
api.configureWebpack({
plugins: [