laracasts / laravel-elixir-vueify-setup Goto Github PK

View Code? Open in Web Editor NEW

38.0 6.0 13.0 174 KB

PHP 21.32% JavaScript 78.43% ApacheConf 0.13% Vue 0.10% CSS 0.02%

laravel-elixir-vueify-setup's People

Contributors

Stargazers

Watchers

Forkers

yasin-buet binarytide duartefq ersinkandemir obonyojimmy drewpayment chris-schmitz minhchu lakpadorjee dakshhmehta fuitad tomltd salehimehdi

laravel-elixir-vueify-setup's Issues

TypeError: Elixir.ready is not a function

This example doesn't appear to function any longer.

Error thrown: TypeError: Elixir.ready is not a function

Steps to reproduce:

git clone https://github.com/laracasts/Laravel-Elixir-Vueify-Setup.git
cd Laravel-Elixir-Vueify-Setup/
composer install
npm install
gulp

php -v 7.0.6
node -v 6.2.2
npm -v 3.9.5

How would the gulp setup be if there were multiple views

@JeffreyWay, The starter kit gives a good example on the usage of Laravel Elixir and Vueify, Thank you very much, but would you be able to update the example for multiple views to see:

how gulp file would look when multiple views need to use browserify.
how the usage is on the blade files.
how to create a custom filter with this setup

Elixir.ready is not a function

When I run gulp, I get the following -

/home/jlevan/PhpstormProjects/WebFiler2/node_modules/laravel-elixir-vueify/index.js:3
Elixir.ready(() => {
       ^

TypeError: Elixir.ready is not a function
    at Object.<anonymous> (/home/jlevan/PhpstormProjects/WebFiler2/node_modules/laravel-elixir-vueify/index.js:3:8)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/jlevan/PhpstormProjects/WebFiler2/gulpfile.js:2:14)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

I just ran a npm install laravel-elixir-vueify --save-dev

Missing .env file?

Any reason this repo doesn't come with an .env file?

I had to copy one from the main Laravel repo and then I could serve the site.

(I'm sure this is just something I haven't kept up with)

Fragment error.

I have been having these issues here: https://laracasts.com/discuss/channels/vue/vue-10-laravel-setup?page=1#reply-120189

so I thought to try out this install... I literally copied and pasted the code into my project for the welcome.blade.php the main.js and the component. But still there is the same error and code not working, although the alert for vue still is coming up...

Any idea what could be causing this?

Error: Cannot find module 'vueify'

Hello @JeffreyWay , I am facing issue while upgrading larave-elixir. So I've tried to build this test repo with different versions of node using NVM, all builds are failing for various versions:

lucas@air:~/Gits/laracasts/Laravel-Elixir-Vueify-Setup [master] $ nvm ls
->      v0.12.7
         v4.1.0

Here is my build script:

nvm use 0.12.7 # use Node 0.12.7
rm -rf node_modules # ensure we start from scratch between each build tests
npm install -g gulp # ensure gulp is installed globally for each Node versions
npm install
gulp

Only some basic warnings for npm install:

npm WARN peerDependencies The peer dependency babel-preset-es2015@^6.1.2 included from vueify will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^3.0.0.
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^3.0.0.

Here is the output:

[12:51:14] Using gulpfile ~/Gits/laracasts/Laravel-Elixir-Vueify-Setup/gulpfile.js
[12:51:14] Starting 'default'...
[12:51:14] Starting 'browserify'...
[12:51:15] 'browserify' errored after 945 ms
[12:51:15] Error: Cannot find module 'vueify'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at /Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/node_modules/laravel-elixir/tasks/browserify.js:95:13
    at Array.forEach (native)
    at browserifyStream (/Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/node_modules/laravel-elixir/tasks/browserify.js:93:39)
    at null.definition (/Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/node_modules/laravel-elixir/tasks/browserify.js:55:13)
    at Task.run (/Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/node_modules/laravel-elixir/Task.js:96:17)
    at Gulp.<anonymous> (/Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/node_modules/laravel-elixir/index.js:94:52)
[12:51:15] Error in plugin 'run-sequence'
Message:
    An error occured in task 'browserify'.

Tried to manuall add vueify, but another error occurs:

lucas@air:~/Gits/laracasts/Laravel-Elixir-Vueify-Setup [master*] $ npm install vueify --save
npm WARN peerDependencies The peer dependency vueify-insert-css@^1.0.0 included from vueify will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency babel-runtime@^6.0.14 included from vueify will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency babel-preset-es2015@^6.1.2 included from vueify will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency babel-plugin-transform-runtime@^6.1.2 included from vueify will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency vue-hot-reload-api@^1.2.0 included from vueify will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.

lucas@air:~/Gits/laracasts/Laravel-Elixir-Vueify-Setup [master*] $ gulp
[13:05:17] Using gulpfile ~/Gits/laracasts/Laravel-Elixir-Vueify-Setup/gulpfile.js
[13:05:17] Starting 'default'...
[13:05:17] Starting 'browserify'...

Fetching Browserify Source Files...
   - resources/assets/js/main.js


Saving To...
   - public/js/main.js

[13:05:19] Finished 'default' after 2.38 s
[13:05:27] gulp-notify: [Laravel Elixir] Browserify Failed!: Couldn't find preset "react" relative to directory "/Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/resources/assets/js" while parsing file: /Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/resources/assets/js/main.js
{ [Error: Couldn't find preset "react" relative to directory "/Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/resources/assets/js" while parsing file: /Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/resources/assets/js/main.js]
  filename: '/Users/lucas/Gits/laracasts/Laravel-Elixir-Vueify-Setup/resources/assets/js/main.js',
  stream:
   { _readableState:
      { highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        objectMode: true,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null,
        resumeScheduled: false },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _maxListeners: undefined,
     _writableState:
      { highWaterMark: 16,
        objectMode: true,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        buffer: [],
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false },
     writable: true,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }
[13:05:27] Finished 'browserify' after 9.94 s

Am I missing something ?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.