searleb/installing-polymer-laravel.md

## installing-polymer-laravel.md

      
    Raw
  

              installing-polymer-laravel.md
            
          
    Setting up Polymer with Laravel

This guide will help you get a starting point for implementing Polymer into a default install of Laravel v5.3.
Install Polymer

cd application/resources
bower init
bower install --save polymer
Include the components in the <head> of application/resources/views/layout.blade.php:
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
Folders

In /application/resources:
mkdir elements
cd elements
touch elements.html
Include elements.html in the <head> under the previous links:
<link rel="import" href="../elements/elements.html">
Use elements.html to import all your elements from either bower_components or your own custom elements.
Gulp file

Install Vulcanize
cd application
npm install --save-dev gulp-vulcanize
Require vulcanize, copy bower_components and vulcanize elements.html into public:
const elixir = require('laravel-elixir');
const vulcanize = require('gulp-vulcanize');

elixir(mix => {
   mix.sass('app.scss')
   .copy('resources/bower_components', 'public/bower_components')
});


gulp.task('vulcanize', function () {
   return gulp.src('resources/elements/elements.html')
   .pipe(vulcanize({
      stripComments: true,
      inlineCss: true,
      inlineScripts: true
   }))
   .pipe(gulp.dest('public/elements/'));
});
Rendering Polymer in a Blade template


Create your Polymer elements in:

application/resources/elements

Include your elements in /resources/elements/elements.html:

<link rel="import" href="./polymer-counter.html" />

Include the element tag in a blade template:

@extends('layout')
@section('content')
    <polymer-counter></polymer-counter>
@endsection