After i run
php artisan ui vue --auth,
i am doing npm install without problem, but when i run npm run dev it show error like this
ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div class="container">
| <div class="row justify-content-center">
webpack compiled with 1 error
how to solve that error?
As explained in the laravel mix documentation, in order to use Vue js, you must use the mix.vue() command in the webpack.mix.js file (in the root folder of your project).
For exemple this:
mix.js('resources/js/app.js', 'public/js').vue()
.sass("resources/scss/app.scss", "public/css");
instead of this:
mix.js('resources/js/app.js', 'public/js')
.sass("resources/scss/app.scss", "public/css");
Related
My Laravel web application domain is like www.mywebsite.com/my-project/public and I don't want to change.
I installed Vue.js by npm install && npm run dev and try to reference app.js by
<script src="{{mix('js/app.js')}}"></script>
but I got error www.mywebsite.com/js/app.js net::ERR_ABORTED 404 (Not Found)
I try to config path in webpack.min.js
mix.js('my-project/resources/assets/js/app.js', 'public/js')
.sass('my-project/resources/assets/sass/app.scss', 'public/css');
but I think it's not way to fix...
Please help me thank you.
You may do so by adding a mix_url configuration option to your application's config/app.php configuration file:
'mix_url' => env('MIX_ASSET_URL', null)
Reference
I am new to Laravel and Vue and trying to include a component in my blade template as below
Below is my app.js
require('./bootstrap');
window.Vue= require('vue');
Vue.component('Home',require('./components/home.vue').default);
webpack.min.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
Home.vue inside resources/js/components/home.vue
<template>
<div class="home">Hello from home</div>
</template>
in my blade template, I have loaded app.js and added component as below
<body class="antialiased">
<Home></Home>
</body>
now when I try to compile npm run dev or npm watch it gives me the following error
ERROR in ./resources/js/components/home.vue 1:0 Module parse failed:
Unexpected token (1:0) You may need an appropriate loader to handle
this file type, currently no loaders are configured to process this
file. See https://webpack.js.org/concepts#loaders
| Hello from home |
webpack compiled with 1 error
can someone please help me to fix the issue?
If you shown the complete home.vue file, the script part with the export is missing:
<template>
<div class="home">Hello from home</div>
</template>
<script>
export default {
name: "Home"
}
</script>
Or it may be also related to this line:
mix.js('resources/js/app.js', 'public/js')
You should try with:
mix.js('resources/js/app.js', 'public/js').vue()
While working with Vue, make sure that following dependencies have been properly installed:
VueJS (of course)
vue-loader (npm i vue-loader)
vue-template-compiler (npm i vue-template-compiler)
You can check those dependencies in your package.json file. If they are not there, then your SFC not going to work.
Export default is not a problem. There are compnents with just template and that's completely fine.
We made a little change on our Laravel project structuere. We made a file 'Larvel' inside the project. To make it work we changed the path in 'index.php' :
require __DIR__.'/laravel/vendor/autoload.php';
$app = require_once __DIR__.'/laravel/bootstrap/app.php';
So the Command php artisan serve isn't working. Due to this problem our vue component isn't updating.
We are running it on local server using xmapp
We want to keep the project structure as it is, and need a solution.
$npm run watch
$npm run watch --pull
$npm run dev
$npm run production
webpack.mix.js =>
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'public/css');
Main view file where all js & css files are linked in ->
master.blade.php
<script src="{{ asset('/') }}js/app.js"></script>
We expect if any changes we make in our vue component after running npm run watch then the update will show on our browser.
public/js/app.js has moved in root folder
You can use version.
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'public/css').version();
<script src="{{ mix('js/app.js') }}"></script>
Here's my webpack.mix.js file:
mix.js('resources/assets/js/app.js', 'public/js')
.combine(['public/js/app.js', 'node_modules/owl.carousel/dist/owl.carousel.js'], 'public/js/app.js');
I am launching js task, then combining all js files into a single one.
When i run npm run dev everything works as expected, but if i run npm run watch and then edit a file that being required in app.js (custom.js) this way:
require('./bootstrap');
require('./custom.js');
Then save the changes, mix is compiling very long, after it finishes my changes not reflected. Am i doing something wrong there?
Loop issue was because i used the same name when combining js files - app.js.
Correct way is not using combine, i've included my owl carousel file in app.js:
require('owl.carousel');
How do I add a third party js file to specific blade views?
Basically I want to add gridstack functionality in a dashboard page inside my new project.
I already tried downloading the js and css files from gridstack, I then placed the gridstack.js in the project's resources/assets/js/ folder, and the css files inside the project's resources/assets/css/ folder
The next step would be to load the files in the mixer. For that I thought that I could just go to /resources/assets/js/app.js and add the library
require("./bootstrap");
//Add the following two lines
require("./jquery-ui.min");
require("./gridstack");
then I ran npm run dev, which gave the following errors
ERROR Failed to compile with 20 errors
These dependencies were not found:
jquery-ui/data in ./resources/assets/js/gridstack.js
jquery-ui/disable-selection in ./resources/assets/js/gridstack.js
omitted 18 similar lines
To install them, you can run: npm install --save jquery-ui/data
jquery-ui/disable-selection jquery-ui/focusable jquery-ui/form
jquery-ui/ie jquery-ui/keycode jquery-ui/labels jquery-ui/jquery-1-7
jquery-ui/plugin jquery-ui/safe-blur jquery-ui/scroll-parent
jquery-ui/tabbable jquery-ui/unique-id jquery-ui/version
jquery-ui/widget jquery-ui/safe-active-element jquery-ui/widgets/mouse
jquery-ui/widgets/draggable jquery-ui/widgets/droppable
jquery-ui/widgets/resizable
Of course I tried to run npm install --save jquery-ui/data to see if it works and it does not:
npm ERR! Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.
How can I add a simple js and css to my project without all these compilation errors...?
I also tried another approach: removed the requires from the above approach, and went for the webpack.mix.js file and made it look like this:
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/app-landing.js', 'public/js/app-landing.js')
.js('resources/assets/js/jquery-ui.min.js', 'public/js')
.js('resources/assets/js/gridstack.js', 'public/js')
....
I then ran the npm run dev only to get the same error from above.
What is wrong here?
I tried to remove the jquery-ui refference and run the npm again... the exact same error
Also, I installed gridstack using npm in my project... but I have no idea how to directly use it. I should be able to use it, since it is "installed", but how?
I also did a npm cache clean, no effect
I also verified my versions of node and npm, they seem ok:
node v6.10.3
npm v3.10.10
EDIT
After removing the ./ from the require, and after removing the jquery-ui altogether (it was already loaded) I managed to get no more errors from the npm command.
However the gridstack functionality is just not there. I compared my sources with an official demo of gridstack and saw that they include 2 js files of gridstack:
<script src="../dist/gridstack.js"></script>
<script src="../dist/gridstack.jQueryUI.js"></script>
But Laravel mix does not agree with me adding the extra require. I get errors again from npm if in /resources/assets/js/app.js I put the following
require("./bootstrap");
require("gridstack");
require("gridstack.jQueryUI"); // nor does it work if I use gridstack.all.js or gridstack.jQueryUI.js
What can I do to get the gridstack full functionality inside my Laravel 5.4 project?
EDIT
What seemed to work is:
remove all changes done previously like the one in app.js
I copied webpack.config.js from node_modules/laravel-mix into my project's root folder
I added the bellow code
module.exports.resolve = {
extensions,
alias: {
'vue$': 'vue/dist/vue.common.js',
'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui')
}
};
In webpack.mix.js, I added the following:
mix.js('resources/assets/js/app.js', 'public/js')
.copy('node_modules/gridstack/dist/gridstack.all.js','public/js');
in package.json I added:
"devDependencies": {
...
"gridstack": "^0.3.0"
}
in the command line I did
sudo npm rebuild node-sass
then
sudo npm run dev
After I the above, npm compiles correctly the mix, bun now, I get a jQuery error in the frontend:
jQuery.Deferred exception: c.draggable is not a function
d.prototype.draggable#http://myproject.com/js/gridstack.all.js:16:1395
This points to the second part of the gridstack.all.js (right at the beginning of it, where jquery is defined... again)
Error seems to indicate that jquery is loaded more than once. But that is not a problem in a classic PHP app.
Any idea how to make this work?
The default laravel application requires by default Bootstrap, lodash and jquery, and when I add gridstack to the project, looks like somewhere there is a second require for jquery. I just don't get it.
Can anyone try to simulate what I am doing and tell me how they did
it?
you need to include gridstack via asset() then everything will be happy - for this example the files are in /public/js/dashboard
eg (the hootsuite grid demo page)
<!DOCTYPE html>
<html>
<head>
<title>Grid Demo</title>
<link rel="stylesheet" href="css/dashboard/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="{{ asset('js/dashboard/fixtures.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/jquery.gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/load.js') }}" type="text/javascript"></script>
</head>
<body>
<div class="header">
-
+
<p>
<a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
</p>
</div>
<div class="grid-container">
<ul id="grid" class="grid">
<li class="position-highlight">
<div class="inner"></div>
</li>
</ul>
</div>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>