Skip to content

Instantly share code, notes, and snippets.

View PierreCavalet's full-sized avatar

Pierre Cavalet PierreCavalet

  • Kaliop Interactive Media
  • Montpellier, France
View GitHub Profile
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
// loads Goodbye as async component and with a code split point
const Goodbye = () => import('@/components/Goodbye')
Vue.use(Router)
export default new Router({
mode: 'history',
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
// loads components as async component and with a code split point
const Goodbye = () => import('@/components/Goodbye')
const Foo = () => import(/* webpackChunkName: "foo-bar" */ '@/components/Foo')
const Bar = () => import(/* webpackChunkName: "foo-bar" */ '@/components/Bar')
Vue.use(Router)
@PierreCavalet
PierreCavalet / index.html
Created August 10, 2018 12:32
prerendered form
<html>
<body>
<div id="app">
<h1>Prerendered form</h1>
<form>
<div>
<label for="firstName">First name</label>
<input id="firstName" name="firstName" />
</div>
<div>
@PierreCavalet
PierreCavalet / index.js
Last active August 10, 2018 12:44
form component
Vue.component('my-form', {
data: function () {
return {
email: '',
firstName: '',
lastName: '',
}
},
template: `
<div>
@PierreCavalet
PierreCavalet / index.js
Created August 10, 2018 12:53
form component that retrieve the previous input values
Vue.component('my-form', {
data: function () {
return {
email: '',
firstName: '',
lastName: ''
}
},
created: function () {
// retrieve previous values and previous focus
@PierreCavalet
PierreCavalet / index.js
Created August 10, 2018 12:54
Form component that retrieve the previous input values and the focus
Vue.component('my-form', {
data: function () {
return {
email: '',
firstName: '',
lastName: ''
}
},
created: function () {
// retrieve previous values and previous focus
@PierreCavalet
PierreCavalet / BarChart.js
Last active November 9, 2018 09:48
Bottom axis
import React, { PureComponent } from 'react'
import { Svg, G, Line } from 'react-native-svg'
const GRAPH_MARGIN = 20
const colors = {
axis: '#E4E4E4'
}
export default class BarChart extends PureComponent {
render() {
@PierreCavalet
PierreCavalet / App.js
Last active November 12, 2018 08:27
Final bar chart
import React, { Component } from 'react'
import { StyleSheet, View } from 'react-native'
import BarChart from './Components/BarChart'
export default class App extends Component {
render() {
const data = [
{ label: 'Jan', value: 500 },
{ label: 'Feb', value: 312 },
@PierreCavalet
PierreCavalet / App.js
Last active November 12, 2018 08:28
Bar generation
import React, { Component } from 'react'
import { StyleSheet, View } from 'react-native'
import BarChart from './Components/BarChart'
export default class App extends Component {
render() {
const data = [
{ label: 'Jan', value: 500 },
{ label: 'Feb', value: 312 },
@PierreCavalet
PierreCavalet / BarChart.js
Last active November 12, 2018 09:31
Translate on the Y axis
import React, { PureComponent } from 'react'
import { Svg, G, Rect } from 'react-native-svg'
export default class BarChart extends PureComponent {
render() {
const SVGHeight = 60
const SVGWidth = 60
const graphHeight = 50
return (