I'm trying to use Font Awesome with Vue + laravel project.
I have it in my package.json
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.4",
"axios": "^0.21.4",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.34",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.3.11",
"resolve-url-loader": "^3.1.4",
"sass": "^1.43.3",
"sass-loader": "^11.0.1",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
},
Imported FontAwesome in main.js
import { library } from '#fortawesome/fontawesome-svg-core'
import { faSpinner } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
I am Use:
<i class="fas fa-ellipsis-v"></i>
But Not Show Icon !!
Read document
https://github.com/FortAwesome/vue-fontawesome
You need add to main.js
Vue.component('font-awesome-icon', FontAwesomeIcon)
and use tag <font-awesome-icon icon="***" />
Example:
<font-awesome-icon icon="ellipsis-v" />
Related
Well i am playing with the new laravel 5.3 and vue.js and i want to do a GET call to some users i have in my DB
Im using components btw.
This is my app.js
require('./bootstrap');
Vue.component('example', require('./components/UserComponents/User.vue'));
const app = new Vue({
el: 'body',
});
This is my component User.vue i left the HTML template out for post size reason i can post it if neccesary
<script>
export default{
data : function () {
return {
users : ''
}
},
methods: {
fetchUser: function () {
var vm = this;
vm.$http.get('user/', function (data) {
vm.$set('users', data)
})
}
},
ready() {
this.fetchUser();
},
}
</script>
Im getting 2 errors in the console
vue-resource.common.js?d39b:27 0ReferenceError: Laravel is not defined(…)
(program):29 Uncaught (in promise) ReferenceError: Laravel is not defined(…)
this is my package.json as you can see i have all the deps for this to work vue and vue resource
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0",
"vue": "^1.0.26",
"vue-resource": "^0.9.3"
}
}
Hope someone could help me out here. Thank you
Or for a cleaner format:
<script>
window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>
Does same thing as Rocco's answer.
Try to put this on your blade, as you can see is inserted by default on app.blade on Laravel 5.3
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
if you're using axios then ensure the following is in your bootstrap.js file after axios is imported:
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
};
When i load my page, calendar not working and on my console i have :
jQuery.Deferred exception: FullCalendar is not defined ReferenceError: FullCalendar is not defined
at HTMLDocument.<anonymous> (http://admin.test/agenda:279:20)
at mightThrow (http://admin.test/js/admin.js:30047:29)
at process (http://admin.test/js/admin.js:30115:12) undefined
admin.js:30340 Uncaught ReferenceError: FullCalendar is not defined
at HTMLDocument.<anonymous> (agenda:279)
at mightThrow (admin.js:30047)
at process (admin.js:30115)
1) I have a laravel project with "AdminLTE 3.0.5".
Package.json :
"devDependencies": {
"#fullcalendar/bootstrap": "^4.4.0",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/interaction": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"admin-lte": "^3.0.5",
"axios": "^0.19",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"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": "^8.0.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
2) I import Fullcalendar package with my webpack :
mix.js('resources/js/app.js', 'public/js/app.js')
.js('resources/js/calendar.js', 'public/js/calendar.js')
app.js :
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
require('jquery-ui/ui/widgets/draggable');
require('admin-lte');
/* Table */
require('../../node_modules/admin-lte/plugins/datatables/jquery.dataTables.min.js');
require('../../node_modules/admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js');
require('../../node_modules/admin-lte/plugins/datatables-responsive/js/dataTables.responsive.min.js');
require('../../node_modules/admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js');
require('../../node_modules/admin-lte/plugins/bs-custom-file-input/bs-custom-file-input.min.js');
calendar.js :
/* Calendar */
require('#fullcalendar/core');
require('#fullcalendar/daygrid');
require('#fullcalendar/timegrid');
require('#fullcalendar/interaction');
require('#fullcalendar/bootstrap');
3) On my vue, i copy/past the AdminLTE3 calendar page and only add my 2 mix file before :
<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('js/calendar.js') }}"></script>
<script>
$(function () {
/* initialize the external events
-----------------------------------------------------------------*/
function ini_events(ele) {
ele.each(function () {
[...]
I use "require()" function to call all js files, and when i run "npm run dev", everything work, no error.
I think that it's a js file order, but it's the same order than AdminLTE3 calendar page... or i'm blind.
I changed all versions of the calendar package & jquery & jquery-ui to have the same that this page (4.4.0 for my dl version).
Someone can help me pls ?
I have the solution.
Imports files like that on my calendar.js :
/* Calendar */
import { Calendar } from '#fullcalendar/core';
import dayGrid from '#fullcalendar/daygrid';
import timeGrid from '#fullcalendar/timegrid';
import interaction, { Draggable } from '#fullcalendar/interaction';
import bootstrap from '#fullcalendar/bootstrap';
And you dont need this 2 lines on my script
<!--
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
-->
I'm trying to build from source Ckeditor 5 with Webpack Encore. I followed the instructions here:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#bundler
But i have a problem with the display of the tool. It looks weird like this (first, when i used the built-in from Ckeditor it was working fine):
I think that the problem is relative to CSS but i don't see what is wrong. My Webpack compiles fine and the console is empty. My package.json looks like this:
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/helper-call-delegate": "^7.8.7",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"#fortawesome/fontawesome-free": "^5.13.0",
"#symfony/webpack-encore": "^0.29.1",
"babel-loader": "^8.1.0",
"bootstrap": "^4.4.1",
"core-js": "^3.0.0",
"jquery": "^3.5.1",
"node-sass": "^4.13.1",
"popper.js": "^1.16.1",
"regenerator-runtime": "^0.13.2",
"sass-loader": "7.0.1",
"webpack-notifier": "^1.6.0",
"#ckeditor/ckeditor5-dev-utils": "^13.0.1",
"#ckeditor/ckeditor5-dev-webpack-plugin": "^9.0.2",
"raw-loader": "^3.1.0",
"postcss-loader": "^3.0.0"
"dependencies": {
"#ckeditor/ckeditor5-adapter-ckfinder": "^19.0.0",
"#ckeditor/ckeditor5-autoformat": "^19.0.0",
"#ckeditor/ckeditor5-easy-image": "^19.0.0",
"#ckeditor/ckeditor5-alignment": "^19.0.0",
"#ckeditor/ckeditor5-autosave": "^19.0.0",
"#ckeditor/ckeditor5-basic-styles": "^19.0.0",
"#ckeditor/ckeditor5-block-quote": "^19.0.0",
"#ckeditor/ckeditor5-core": "^19.0.0",
"#ckeditor/ckeditor5-editor-classic": "^19.0.0",
"#ckeditor/ckeditor5-essentials": "^19.0.0",
"#ckeditor/ckeditor5-font": "^19.0.0",
"#ckeditor/ckeditor5-heading": "^19.0.0",
"#ckeditor/ckeditor5-indent": "^19.0.0",
"#ckeditor/ckeditor5-link": "^19.0.0",
"#ckeditor/ckeditor5-list": "^19.0.0",
"#ckeditor/ckeditor5-media-embed": "^19.0.0",
"#ckeditor/ckeditor5-paragraph": "^19.0.0",
"#ckeditor/ckeditor5-paste-from-office": "^19.0.0",
"#ckeditor/ckeditor5-table": "^19.0.0",
"#ckeditor/ckeditor5-theme-lark": "^19.0.0",
"#ckeditor/ckeditor5-typing": "^19.0.0",
"#ckeditor/ckeditor5-image": "^19.0.0",
"bootstrap-datepicker": "^1.9.0",
"dropzone": "^5.7.0",
"leaflet": "^1.6.0",
"leaflet-ajax": "^2.1.0",
"sortablejs": "^1.10.2",
"sweetalert2": "^9.10.12"
}
My webpack.config.js looks like this:
const { styles } = require( '#ckeditor/ckeditor5-dev-utils' );
var Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addEntry('Form', './assets/js/modules/Form.js')
.addEntry('Edit', './assets/js/modules/Edit.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
.enableSassLoader()
.copyFiles({
from: './assets/img'})
// Use raw-loader for CKEditor 5 SVG files.
.addRule( {
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
loader: 'raw-loader'
} )
// Configure other image loaders to exclude CKEditor 5 SVG files.
.configureLoaderRule( 'images', loader => {
loader.exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/;
} )
// Configure PostCSS loader.
.addLoader({
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve('#ckeditor/ckeditor5-theme-lark')
}
} )
} )
I removed CKEditorWebpackPlugin from the webpack file because it was bringing errors in the compilation phase of Webpack, but the problem was already there with it.
My import of CKeditor looks like this:
import ClassicEditorBase from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '#ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '#ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ListPlugin from '#ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
export default class ClassicEditor extends ClassicEditorBase {}
ClassicEditor.builtinPlugins = [...
I don't see what is wrong... maybe someone can help me? Thank you so much if you any idea to solve this problem.
Have a nice day
Ok, my bad, i found the answer myself. It's something related to my configuration, maybe a mismatch with other plugins (like Sortable or Dropzone) because when i moved the import of Ckeditor to my main app.js it works (it was before in Edit.js)...really weird but now it works.
I use mdc with laravel-mix but it's not loading scss files from node modules.
I tried some other solutions about giving includepaths in mix.sass, but they are not working.
I tried code in webpack.mix.js
const path = require('path');
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
includePaths: ['./node_modules']
});
but its still giving me same error that
undefined
^
Can't find stylesheet to import. #import "#material/elevation/mixins";
For Laravel 6 I had to do it this way:
npm install --save material-components-web
app.scss:
#import "material-components-web/material-components-web";
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
sassOptions: {
includePaths: ['./node_modules']
}
});
Yes, answer from Edmund Sulzanok is correct, add sassOptions but for me too:
Laravel VERSION = '6.7.0';
I had to upgrade npm package.json devDependencies
"devDependencies": {
...
"cross-env": "^6.0.3",
"laravel-mix": "^5.0.1",
...,
"resolve-url-loader": "^3.1.1",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
...
},
"dependencies": {
...
"material-components-web": "^4.0.0",
...
}
After modify package.json run npm install
npm install
You could see Packages outdated with
npm outdated
good luck
I try to integrate vue.js with laravel 5.3. I call "gulp" which creates the main.js file in the public folder. I can see in the browser that the js file is loaded but the value of "message" is not shown. It is only written {{message}}. Any ideas why?
<body>
<div class="container">
<div class="content">
<div class="title">
<p>#{{ message }}</p>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
gulpfile:
var elixir = require('laravel-elixir');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');
elixir(mix => {
mix.sass('app.scss').browserify('main.js');
});
main.js:
import Vue from 'vue';
var app = new Vue({
el: 'body',
data: {
message: 'Hello Vue!'
}
})
package.json:
"dependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-vueify": "^1.0.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}
EDIT
package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch",
"slate": "rimraf node_modules && npm install",
"clean": "rimraf public/css/app.css public/css/app.css.map public/js/app.js && npm run dev"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.1",
"laravel-elixir": "^6.0.0-15",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-vue-2": "^0.3.0",
"laravel-elixir-webpack-official": "^1.0.10",
"lodash": "^4.17.2",
"moment": "^2.17.1",
"vue": "^2.1.6",
"vue-resource": "^1.0.3",
"vuex": "^2.1.1"
}
}
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
mix
.sass('app.scss')
.webpack('main.js');
});
Your code is fine except one thing. Vue JS Doesn't recommend use of body element as vue js root.
The provided element merely serves as a mounting point. Unlike in Vue
1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to or
https://v2.vuejs.org/v2/api/#el
Code
<body>
<div class="container" id="app"> <!-- Mind the id attached -->
<div class="content">
<div class="title">
<p>#{{ message }}</p>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
and main.js
import Vue from 'vue';
var app = new Vue({
el: '#app', // mind the root element is changed to app.
data: {
return { // mind the return in data
message: 'Hello Vue!'
}
}
});