Tommaso Marcelli hal0gen

## Hello.vue
<template>
  <div class="grid-container">
    <div class="grid-x">
      <div class="callout">
        <p>
          The <tooltip :title="'Fancy word for a beetle.'" :fade-in-duration="800" :position="'right'">scarabaeus</tooltip> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
        </p>
      </div>
    </div>
  </div>

## mutation-vs-reducer.js
state: {
  count: 1
}

// Vuex Mutation
increment(state) {
  // mutate state
  state.count++;
}

## main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import 'script-loader!jquery/dist/jquery.min';
import 'script-loader!what-input/dist/what-input.min';
import 'script-loader!foundation-sites/dist/js/foundation.min';

// Vue libraries
import Vue from 'vue';
import App from './App';

## foundation.js
module.exports = {
  mounted() {
    // eslint-disable-next-line
    $(this.$el).foundation();
  },
  destroyed() {
    // eslint-disable-next-line
    $(this.$el).foundation.destroy();
  },
};

## utils.js
exports.cssLoaders = function (options) {
 // ...
  return {
    // ...
    scss: generateLoaders(['css', 'sass?data=@import "~src/styles/app";']), // Make custom SASS available to all components
    // ...
  }
}

## app.scss
// Load custom Foundation variables
@import "./settings";
// Load Foundation
@import "~foundation-sites/scss/foundation";

## Slider.vue
<template>
  <div class="row">
    <div class="medium-10 medium-offset-1 columns">
      <h1>{{ msg }}</h1>
      <div class="slider" data-slider v-bind:data-initial-start="this.dataValue" v-bind:data-end="this.dataEnd">
        <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
        <span class="slider-fill" data-slider-fill></span>
        <input type="hidden" class="slider-input">
      </div>
      <p>Value: {{ dataValue }}</p>

## Gemfile
source 'https://rubygems.org'

gem 'capistrano', '~> 3.4.0'
gem 'capistrano-composer'
gem 'wordmove'

## _mobile-ready-web-app.html
<!doctype html>

<!-- Adapted from https://gist.github.com/tfausak/2222823 -->

<html>
  <head>
    <title>Mobile-ready web app</title>

    <!-- CONFIGURATION -->
	<template>
	<div class="grid-container">
	<div class="grid-x">
	<div class="callout">
	<p>
	The <tooltip :title="'Fancy word for a beetle.'" :fade-in-duration="800" :position="'right'">scarabaeus</tooltip> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
	</p>
	</div>
	</div>
	</div>
	state: {
	count: 1
	}

	// Vuex Mutation
	increment(state) {
	// mutate state
	state.count++;
	}
	// The Vue build version to load with the `import` command
	// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

	import 'script-loader!jquery/dist/jquery.min';
	import 'script-loader!what-input/dist/what-input.min';
	import 'script-loader!foundation-sites/dist/js/foundation.min';

	// Vue libraries
	import Vue from 'vue';
	import App from './App';
	module.exports = {
	mounted() {
	// eslint-disable-next-line
	$(this.$el).foundation();
	},
	destroyed() {
	// eslint-disable-next-line
	$(this.$el).foundation.destroy();
	},
	};
	exports.cssLoaders = function (options) {
	// ...
	return {
	// ...
	scss: generateLoaders(['css', 'sass?data=@import "~src/styles/app";']), // Make custom SASS available to all components
	// ...
	}
	}
	// Load custom Foundation variables
	@import "./settings";
	// Load Foundation
	@import "~foundation-sites/scss/foundation";
	<template>
	<div class="row">
	<div class="medium-10 medium-offset-1 columns">
	<h1>{{ msg }}</h1>
	<div class="slider" data-slider v-bind:data-initial-start="this.dataValue" v-bind:data-end="this.dataEnd">
	<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
	<span class="slider-fill" data-slider-fill></span>
	<input type="hidden" class="slider-input">
	</div>
	<p>Value: {{ dataValue }}</p>
	source 'https://rubygems.org'

	gem 'capistrano', '~> 3.4.0'
	gem 'capistrano-composer'
	gem 'wordmove'
	<!doctype html>

	<!-- Adapted from https://gist.github.com/tfausak/2222823 -->

	<html>
	<head>
	<title>Mobile-ready web app</title>

	<!-- CONFIGURATION -->