I made the basic installation from Vue.JS in my Laravel project, this is my package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}
So I run this code that everyone does after installation npm run install && npm run dev for the mix from Laravel generate the files, every tutorial say that I must put this in the footer from my main file
<script src="{{ asset('js/app.js') }}"></script>
And always say that the file doesn't exist, it is true because when I run this command from mix above, this simple make a js and a css folder in a new public folder, this is the right approach? because I don't see any tutorial that this command makes a public folder, see the image below:
So when I explicitly put this path:
<script src="{{ asset('public/js/app.js') }}"></script>
My Vue.js is loaded and I see the default text from Vue.js in console, but when I put the template from this file TesteFood.vue
<template>
<h1>Testando VUE</h1>
</template>
Is not showing and I make this command too npm run watch no success.
Try the mix helper function:
<script src="{{ mix('js/app.js') }}"></script>
I simply reinstall all my Laravel and install Vue.js and don't move the public folder and all is working fine.
Thank you all!
when you install the laravel 6, then run this command composer require laravel/ui --dev for integrating all vue js dependencies, then create your component and register that in app.js file like this :
Vue.component('teste-food', require('./components/TesteFood.vue'));
and then run npm run dev for compiling once the codes or npm run watch for compiling anythime you add some vue.js file or sass in your porject.
In this steps you should see your component.
Related
I'm used to React and doing npm start to get my app running locally. However, when I run that on my new project it prompts that there is no start script. And upon further inspection, there isn't one.
If this is what my package.json looks like how do I get this running locally?
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.13.0",
"axios": "^0.19",
"bootstrap": "^4.5.0",
"cross-env": "^7.0",
"datatables.net": "^1.10.22",
"datatables.net-bs4": "^1.10.22",
"datatables.net-plugins": "^1.10.22",
"install": "^0.13.0",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.9",
"lodash": "^4.17.20",
"moment-timezone": "^0.5.32",
"npm": "^6.14.9",
"popper.js": "^1.16.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"vue-recaptcha-v3": "^1.9.0"
}
}
It's a Laravel environment using PHP for back end and Vue for front end. I feel really stupid for not knowing this, but when I search I'm also not finding anything.
I'm using PhpStorm, I downloaded XAMPP, Composer, and PHP. I'm not sure what I'm missing or need to do? Help, please. If I'm missing any information I can certainly provide it to the best of my ability.
I'm a dingbat, I realized I wasn't running backend. So.. I did php artisan serve and received this. Any suggestions?
[![enter code here][2]][2]
C:\Users\emzib\ValorSystems.com>php artisan serve
PHP Warning: require(C:\Users\emzib\ValorSystems.com/vendor/autoload.php): Failed to open stream: No such file or directory in C:\Users\emzib\ValorSystems.com\artisan on line 18
PHP Fatal error: Uncaught Error: Failed opening required 'C:\Users\emzib\ValorSystems.com/vendor/autoload.php' (include_path='.;C:\php\pear') in C:\Users\emzib\ValorSystems.com\artisa
n:18
Stack trace:
#0 {main}
thrown in C:\Users\emzib\ValorSystems.com\artisan on line 18
Try below steps
composer install
npm install
npm run dev
I'm using laravel echo with pusher js to build a real-time feature in my app. I've done all the steps required as told by the doc. I've successfully set up the pusher configurations and it works fine: when my event is fired I get it notified in my Debug console on my Pusher account.
My issue is with the front-end. As told by the docs I've added the portion of code neccessary at the bottom of my resources/js/bootstrap.js file. I uncommented it actually and add the proper ids.
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key:my-pusher-key-here,
cluster: eu,
forceTLS: true
});
The issue is that although I've inserted those
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/echo.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>
var channel = Echo.channel('my-channel');
channel.listen('my-event', function(data) {
alert(JSON.stringify(data));
});
</script>
in my blade view, I'm getting this error in the browser's console :ReferenceError: Echo is not defined.
I'm guessing it has something to do with echo library not found but I'm not understanding why. For the <script src="js/echo.js"></script> line, I copied the echo.js file got after the npm install --save laravel-echo pusher-js command run.
I went through many suggestions like gulp to get the changes in the Js files automatically compiled I guess but nothing... For the gulp command entered in my CLI, I'm getting No gulpfile file found error. I've also tried to copy the first portion of code directly in the app.js file instead but no difference, I'm getting the same error.
As I've said.. I guess this has certainly something to do with the Echo library not found but why that ? Your help will be very appreciated
package.json file
"private": true,
"scripts": {
"build": "webpack -p",
"watch": "npm run development -- --watch",
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"gulp": "^4.0.2",
"laravel-echo": "^1.5.4",
"pusher-js": "^5.0.0"
}
}
You have import Echo from 'laravel-echo'; inside resources/js/bootstrap.js file.
It tries to search for Echo dependency in node_modules folder.
You should use laravel-mix to build JavaScript files.
Remove defer from your script tag. This will cause the app.js script to be deferred, and the other script will run first before this script
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
I have faced the same error as you, the error is happening in your resources/js/app.js file. if you have commented require('./bootstrap'); uncomment it it will work for you.
I believe you messed up the steps after uncommenting the lines in resources/js/bootstrap.js file. To use the code in there you need to import the resources/js/app.js file. Go look in that, you'll see it is importing the bootstrap file. You can import axios in your resources/js/app.js as you might need it in your blade.
Confirm that your resources/js/app.js file at least has these lines:
require('./bootstrap');
const { default: axios } = require('axios');
window.Vue = require('vue').default;
Then in your blade file use this to get vue running:
<script src="{{ asset('js/app.js') }}"></script>
<script>
new Vue({
el: '#app',
data: {},
methods: {},
mounted() {},
});
</script>
Finally check the webpack.mix.js file and confirm that it at least has:
mix.js('resources/js/app.js', 'public/js')
.vue();
For me, using php 7.4 I had to run npm run production to build the js files. And it was running flawlessly.
Go in terminal,
tape this command : npm install and use laravel mix : npm run dev that resolve my error.
Thanks.
We run some of our javascript files through the babel() functionality that Laravel mix supplies to have some backwards compatibility.
The problem we have is that if we change anything in the app.js or app.scss the watch script gets triggerd and Laravel mix automaticly compiles the correct scripts, but it does not trigger on any changes in any of the files that we feed into babel(). It does not matter if we run watch or watch-poll. It does compile the babel() scripts if we rerun watch manually, or if we run production/dev.
I have tried to find documentation on babel() or watch that explains this strange behavior. but could not find anything that explains this weird issue.
webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
// Compile some resources independently to not include it in all pages.
.babel('resources/assets/js/cart.js', 'public/js/cart.js')
.babel('resources/assets/js/manage-addresses.js', 'public/js/manage-addresses.js')
.babel('resources/assets/js/catalog-overview-order.js', 'public/js/catalog-overview-order.js');
package.json
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
Software versions:
NPM: 6.4.1
Node.js: 8.12.0
Webpack: 4.29.0
Laravel: 5.5
Laravel mix:4.0.14
OS: Ubuntu 18.04
PHP: 7.0.30
Docker: 18.09.1, build 4c52b90
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.5.0",
"axios": "^0.17",
"bootstrap": "^4.1.3",
"cross-env": "^5.1",
"datatables": "^1.10.18",
"datatables.net-bs4": "^1.10.19",
"datatables.net-buttons-bs4": "^1.5.3",
"datatables.net-plugins": "^1.10.18",
"datatables.net-rowreorder": "^1.2.5",
"datatables.net-rowreorder-bs4": "^1.2.5",
"jquery": "^3.2",
"laravel-mix": "^4.0.14",
"popper.js": "^1.14.6",
"resolve-url-loader": "^2.3.1",
"sass": "^1.16.1",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.22"
},
"dependencies": {
"#babel/polyfill": "^7.2.5",
"animate.css": "^3.7.0",
"bootstrap4-notify": "^4.0.3",
"dropzone": "^5.5.1",
"jquery-mask-plugin": "^1.14.15",
"select2": "^4.0.5",
"toastr": "^2.1.4"
}
}
You should have mix.js() with some inputs piped into babel.
mix.js('resources/assets/js/cart.js', 'public/js/cart.js').babel('public/js/cart.js', 'public/js/cart.js')
How do I setup live code reload, kind of like meteor, with featherjs?
Nodemon installs automatically via CLI. To run it just type npm run dev.
Step 1. Install nodemon in your app directory:
npm install --save-dev nodemon
Step 2. Add the following to your package.json file, in the scripts section:
...
},
"scripts": {
"test": "npm run eslint && npm run mocha",
"dev": "./node_modules/nodemon/bin/nodemon.js src/",
"eslint": "eslint src/. test/. --config .eslintrc.json",
"start": "node src/",
"mocha": "mocha test/ --recursive"
}
...
Step 3. Run the script using:
npm run dev
I'm having a lot of trouble deploying to heroku/production with babel(using babel-cli) + es6 javascript. My app is a simple express and node server written in es6 style javascript.
I'm using "babel-cli" (installed via package.json) and a postinstall script inside package.json to precompile my es6 javascript into a "build" folder before starting the server.
The weird thing is that everything compiles smoothly with babel-cli for development, but not for production.
When deploying to production/heroku, the build process gets stuck on the babel command in Makefile and throws an error.
Package.json
{
"name": "messenger-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rm -rf build && mkdir build",
"build-server": "babel src --out-dir build",
"build": "npm run clean && npm run build-server",
"postinstall": "make build",
"start": "node ./build/server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-es2015": "^6.9.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"request": "^2.72.0"
},
"engines": {
"node": "4.4.5"
},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-preset-stage-2": "^6.11.0"
}
}
Makefile:
build: clean server_build
clean:
rm -rf build
mkdir -p build
server_build:
babel src --out-dir build
rsync -av --include \*/ --include \*.json --exclude \* ./src/ ./build/
rsync -av --include \*/ --include \*.ejs --exclude \* ./src/ ./build/
.PHONY: build clean
The error:
You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.
Any help would be much appreciated! Setting up server stuff is my worst nemesis! :(
I usually run babel through weback, so I could be wrong here (I don't typically use makefiles), BUT, I would assume you would need to install babel-core in order for it to run correctly? It seems like the error is related to the fact that you just have "babel" installed, which will not work with v6. You need to install its components, which at minimum would require "babel-core."