eirikb

const req = require.context('./components/', true, /\.(js|vue)$/i);
req.keys().map(key => {
  const name = key.match(/\w+/)[0];
  return Vue.component(name, req(key))
});

eirikb

import 'material-design-lite'

Vue.mixin({
  mounted() {
    if (!this.$el || !this.$el.querySelectorAll) return;
    componentHandler.upgradeElement(this.$el);
    
    for (const el of this.$el.querySelectorAll('[class*=mdl-js-]')) {
      if (!el.dataset.upgraded) {
        componentHandler.upgradeElement(el);

eirikb

import Vue from 'vue';
import 'material-design-lite';

Vue.mixin({
  mounted() {
    for (const el of this.$el.querySelectorAll('[class*=mdl-js-]')) {
      if (!el.dataset.upgraded) {
        componentHandler.upgradeElement(el);
      }
    }

eirikb

<template>
  <canvas ref="chart"></canvas>
</template>

<script>
  import chart from 'chart.js'

  export default {
    props: ['options', 'data'],

eirikb

<style lang="scss">
  @import "~material-design-lite/material.css";
</style>

eirikb

npm i
npm start

Result:

eirikb

vuetwo

Proof of concept library for building vue apps.
Basically a hacked together wrapper around rollup + rollup-watch with predefined setup.
vue template plugin is a slightly modified version of the new vue-template-compiler.

eirikb

vuetwo demo

Proof of concept vue for the lazy

Usage

1. Download zip
2. npm install
3. npm start

eirikb

#Demo

##About The demo is meant to show how to make an automated answer to a hn comment, translated from Norwegian to English with these steps:

1. Click on Chrome address bar.
2. Type translate.google.com and press enter.
3. Click on input field.
4. Type the text for translation and wait for it to translate.

eirikb

1. Download zip.
2. npm install.
3. npm start.