Basic Vue Router Example using Official Vue Router plugin
A Pen by Swapnil Bhavsar on CodePen.
<?php | |
/* | |
|-------------------------------------------------------------------------- | |
| Application Routes | |
|-------------------------------------------------------------------------- | |
| | |
| Here is where you can register all of the routes for an application. | |
| It's a breeze. Simply tell Laravel the URIs it should respond to | |
| and give it the controller to call when that URI is requested. |
FROM php:5.6-apache | |
RUN apt-get update && apt-get install -y libpq-dev && docker-php-ext-install pdo pdo_pgsql | |
COPY src/ /var/www/html |
import {join} from 'path'; | |
import webpack from 'webpack'; | |
import {merge} from 'lodash'; | |
import WebpackDevServer from 'webpack-dev-server'; | |
import makeConfig from './make-config'; | |
export default function(gulp, plugins, config) { | |
var {ENV, site, port} = config; | |
var {gutil, browserSync} = plugins; | |
const isDev = ENV === 'DEV'; |
Basic Vue Router Example using Official Vue Router plugin
A Pen by Swapnil Bhavsar on CodePen.
Prerequisites : the letsencrypt CLI tool
This method allows your to generate and renew your Lets Encrypt certificates with 1 command. This is easily automatable to renew each 60 days, as advised.
You need nginx to answer on port 80 on all the domains you want a certificate for. Then you need to serve the challenge used by letsencrypt on /.well-known/acme-challenge
.
Then we invoke the letsencrypt command, telling the tool to write the challenge files in the directory we used as a root in the nginx configuration.
I redirect all HTTP requests on HTTPS, so my nginx config looks like :
server {
{ | |
"scripts": { | |
"start": "webpack-dev-server --config webpack.dev.config.js", | |
"clean": "rm -rf ./dist", | |
"build": "webpack --config webpack.prod.config.js --progress" | |
} | |
} |
function testCSSVariables() { | |
var color = 'rgb(255, 198, 0)'; | |
var el = document.createElement('span'); | |
el.style.setProperty('--color', color); | |
el.style.setProperty('background', 'var(--color)'); | |
document.body.appendChild(el); | |
var styles = getComputedStyle(el); | |
var doesSupport = styles.backgroundColor === color; |
import Vue from 'vue' | |
import VueRouter from 'vue-router' | |
Vue.use(VueRouter) | |
Vue.use(require('vue-resource')) | |
const router = new VueRouter({ | |
history : true, | |
saveScrollPosition: true | |
}); |
<template> | |
<div class="Alert Alert--{{ type | capitalize }}"> | |
<slot></slot> | |
</div> | |
</template> | |
<script> | |
export default { | |
props: { | |
type: { |
var elixir = require('laravel-elixir'); | |
require('laravel-elixir-webpack'); | |
elixir(function (mix) { | |
mix.webpack('./resources/assets/js/app.js',{ | |
module: { | |
loaders: [ | |
{ | |
test: /\.js$/, | |
loader: 'babel', |