Skip to content

Instantly share code, notes, and snippets.

View darrenjennings's full-sized avatar
🗜️
guuu

Darren Jennings darrenjennings

🗜️
guuu
View GitHub Profile
@darrenjennings
darrenjennings / Api.js
Last active May 5, 2017 20:30
Data Driven Vue.js Example
import axios from 'axios';
export default class Api {
static getUsers() {
return axios.get(`https://jsonplaceholder.typicode.com/users`);
}
}
<template>
<div class="data-table">
<h1>{{headerTitle}}</h1>
<br>
<table class="table table-bordered table-condensed table-info table-hover">
<thead>
<tr>
<th v-for="column in columns" class="label-cell sortable-cell" :id="column" @click="sort">{{column}}</th>
</tr>
</thead>
### Keybase proof
I hereby claim:
* I am darrenjennings on github.
* I am darrenjennings (https://keybase.io/darrenjennings) on keybase.
* I have a public key ASBQgUi8V_OHguh7gPmPexpQ3VZEsuCMyvGAf9OWT96TIQo
To claim this, I am signing this object:
@darrenjennings
darrenjennings / index.js
Last active November 27, 2017 21:21
Sample Vuejs plugin file
import VueToAKill from "./VueToAKill.vue";
const VueToAKillLib = {
install(Vue) {
Vue.component("vue-to-a-kill", VueToAKill);
}
};
export default VueToAKillLib;
import { shallow } from "vue-test-utils";
import { createRenderer } from "vue-server-renderer";
import VueToAKill from "../src/VueToAKill.vue";
const defaultProps = {
agents: ['James Bond', 'Alec Trevelyan', 'M', 'Q'],
licenseToKill: true
};
@darrenjennings
darrenjennings / Mouse.js
Last active January 12, 2018 00:56
Vue Render Prop - Child
const Mouse = {
name: "Mouse",
props: {
render: {
type: Function,
required: true
}
},
data() {
return {
@darrenjennings
darrenjennings / App.vue
Last active January 12, 2018 00:57
Vue Render Prop - Parent
<template>
<div id="app">
<Mouse :render="__render"/>
</div>
</template>
<script>
import Mouse from "./Mouse.js";
export default {
name: "app",
@darrenjennings
darrenjennings / index.html
Created January 4, 2018 08:17
skatejs-vue 1221 proto
<x-vue yell>Dude</x-vue>
<template>
<div>
<div class="stutterer">
<svg
height="310"
width="310">
<circle
ref="face"
class="clockFace"
cx="155"
@darrenjennings
darrenjennings / useMachine.ts
Created January 19, 2020 00:17
vue useMachine.ts
import { StateMachine, interpret, EventObject } from '@xstate/fsm'
import { ref, Ref, onBeforeMount } from '@vue/composition-api'
export default function useMachine<TContext, TEvent extends EventObject = EventObject> (
stateMachine: StateMachine.Machine<TContext, TEvent, any>): {
current: Ref<StateMachine.State<TContext, TEvent, any>>,
send: StateMachine.Service<TContext, TEvent>['send'],
service: StateMachine.Service<TContext, TEvent>,
} {
const current = ref(stateMachine.initialState) as Ref<StateMachine.State<TContext, TEvent, any>>