https://github.com/vuejs/laravel-elixir-vue-2

Laravel Elixir Vue 2.0 support plugin
https://github.com/vuejs/laravel-elixir-vue-2

Last synced: 3 months ago
JSON representation

Laravel Elixir Vue 2.0 support plugin

• Host: GitHub
• URL: https://github.com/vuejs/laravel-elixir-vue-2
• Owner: vuejs
• Archived: true
• Created: 2016-08-23T09:23:32.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-30T16:16:08.000Z (about 8 years ago)
• Last Synced: 2024-04-14T17:22:27.363Z (8 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 106
• Watchers: 9
• Forks: 20
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue-js - Laravel Elixir-vue-2

README

        
# laravel-elixir-vue-2

> Laravel Elixir 6 support for Vue 2.0

This package provides Webpack support for compiling Vue 2.0 `.vue` files in your Laravel Elixir 6 projects. Please note that, if using Laravel Elixir 5 or below, you don't want this package.

Usage is identical to [laravel-elixir-vue](https://github.com/JeffreyWay/laravel-elixir-vue):

## Step 1: Install

```

npm install laravel-elixir-vue-2 --save-dev

```

## Step 2: Gulpfile.js

``` js

var elixir = require('laravel-elixir')

require('laravel-elixir-vue-2')

elixir(function(mix) {

  mix.webpack('app.js'); // resources/assets/js/app.js

})

```

## Extending/Modifying the Default Config

From Elixir's docs:

> If you'd like to leverage more of Webpack's functionality, Elixir will read any webpack.config.js file that is in your project root and factor its configuration into the build process.

For example, to make Vue use `sass-loader` for ``:

``` js

// webpack.config.js

module.exports = {

  vue: {

    loaders: {

      js: 'buble-loader',

      scss: 'vue-style-loader!css-loader!sass-loader'

    }

  }

}

```

## Using Spread Operator

The [Object spread operator](https://github.com/sebmarkbage/ecmascript-rest-spread) requires `Object.assign` to be available. Make sure to [polyfill it](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill) if you target browsers that don't support it yet.