Is there actually a Jade template engine for Laravel5?
Jade code would be much easier to develop with, and - it would produce a compact HTML code.
I am new to Laravel since today, figuring out the same question you have.
I think there are two different approches:
Compiling via build tools
First you could use npm, gulp and elixir - witch both come with Laravel.
Therefore you have to have npm and gulp installed (I assume you already have).
Use the laravel-elixir-jade module via
npm i --save-dev laravel-elixir-jade
After adding a couple of lines in your gulpfile you can run the default task via
gulp
Here is an example of an elixir function inside the gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-jade');
elixir(function(mix) {
mix.less('app.less')
.jade({
baseDir: './resources',
blade: true,
dest: '/views/',
pretty: true,
search: '**/*.jade',
src: '/jade/'
});
});
Dont forget the require('laravel-elixir-jade'); at the beginning.
Compiling at server-side
You also have the possibility to let the PHP-Server render your jade files while rendering the page. I have created a package called mhochm/laravel-jadephp could be the right module for you.
I promise:
Create views as always but in Jade syntax
Require this package with composer:
composer require mhochm/laravel-jadephp
Add the ServiceProvider to the providers array in config/app.php:
'mhochm\LaravelJadePHP\LaravelJadePHPServiceProvider',
I hope this will help you :)
Moses
Related
I have laravel Vue app and it works perfectly with chrome and firefox. but it doesn't work on Edge or IE11 and the console shows error on arrow function!?
How to compile or transpile to es5 with laravel mix and webpack?
could you show the correct configuration for webpack.mix.js?
tnx alot
UPDATE February 2020
If anyone still need help with this, mix already provide a babel compilation to es5:
A slight variation of mix.scripts() is mix.babel(). Its method
signature is identical to scripts; however, the concatenated file will
receive Babel compilation, which translates any ES2015 code to vanilla
JavaScript that all browsers will understand.
You can use it like this:
mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')
DOCS
In order to compile your es6 code to es5 follow the following steps:
1) install the babel-env preset
npm install #babel/preset-env --save
And then declare it in your .babelrc in the root directory:
{
"presets": ["#babel/preset-env"]
}
2) compile your code using
npm run dev //for dev environment
or
npm run prod // for production environment
after a lot of search, I've found out that this Vuecomponent causes the error "https://github.com/godbasin/vue-select2" how can I compile it to es5.
the edge console error:
Expected identifier, string or number
and the corresponding line that it shows is this:
setOption(val = []) {
this.select2.empty();
this.select2.select2({
-----> ...this.settings,
data: val
});
this.setValue(this.value);
},
sorry for taking your time
As in Material Component Web's example, I want to be able to import SCSS from my node_modules like this:
#import '#material/elevation/mdc-elevation';
However, I'm getting this error message when trying to run the webpack build:
File to import not found or unreadable: #material/elevation/mdc-elevation.
#import './~/#material/elevation/mdc-elevation.scss'; doesn't work either.
I'm pretty sure the issue is somewhere in my webpack config, but I can't figure out where.
What did they do in Material Components Web's Vue.js example in order to make it work?
Here's my npm-debug.log in case you need it.
And here's the corresponding Git repository: sk22/spg-tinf-sem03/proj01
Thanks in advance!
Edit: I want to be able to import the scss files, not the compiled css.
Got it.
here's a part of my webpack 2 config's module.rules:
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, 'node_modules')],
},
},
],
},
So what did I do wrong?
My options object was placed in the rule directly, not the loader.
The old webpack config rule looked like this:
{
test: /\.(sass|scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
options: { includePaths: [path.resolve(__dirname, './node_modules')] },
},
See the difference? Instead of the 'sass-loader' string, I extended it to an object, containing the loader name and the options object, because the options only apply to the sass-loader.
(You could also drop the path.resolve and only write 'node_modules', but it might be safer to leave it.)
Check out this documentation page for further information. https://webpack.js.org/configuration/module/#rule-use
Without that loader, you must prefix each import with a ~, which webpack converts to the node_modules folder, at least with my previous configuration.
But this will break 3rd party SCSS frameworks like Material Components Web, because they use #import statements without a leading ~ themselves, for example here.
Inside .vue files
This will not work in .vue files, as vue-loader just uses sass-loader without any options by default.
So if you want that to work, you probably need to make use of vue-loader's own options, as described in its documentation.
(I'm unable to get it to work for some reason I don't know...)
EDIT: Webpack has a section on sass-loader now: https://webpack.js.org/loaders/sass-loader/ also mentioning includepaths.
I had the same issue with #material and Vue. I managed to resolve the problem without adjusting the use property directly.
Solution
Step 1: First create a default Vue 2.1 project using the CLI.
Your file structure will have a ./build directory.
Step 2: Open the file 'utils' you will see a cssLoaders() function which returns an object/map for the languages vue-loader supports.
You will see both sass and scss in that map.
Step 3: Change the values of sass and scss to:
sass: generateLoaders('sass', {
indentedSyntax: true,
includePaths: [path.resolve(__dirname, '../node_modules')]
}),
scss: generateLoaders('sass', {
includePaths: [path.resolve(__dirname, '../node_modules')]
}),
Step 4: Go to the .vue file you're using and change the lang attribute in your <style> element to either sass or scss.
Step 5: After you've done that go to the terminal/console and install sass-loader with:
npm install sass-loader node-sass webpack --save-dev
Step 6: Then run npm run dev and it should work.
Why does this work?
Libraries
I dug around a bit and it turns out sass-loader uses node-sass which has some options such asincludePaths one mentioned by #22samuelk. IncludePaths tells node-sass or rather the underlying library LibSass to include sass files from that directory/path.
Vue
Sass-loader options
By default Vue expects your assets to be in your projects src/assets folder (correct me if I'm wrong). You can however use ~ to indicat you want to start at your projects root which would look like `~/node_modules/#material/smth/mdc-smth.scss.
Now if you want your sass-loader to use something other than those options you need to explicitly tell them.
Hence path.resolve(__dirname, '../node_modules' since the utils file is in ./build and you need to use an absolute path for sass-loader to understand where to look.
Vue-loader config
This is not really specific to the question but the vue-loader config defined in vue-loader.conf.js works as follows:
It uses the map returned by cssLoaders() to build the loaders expected by webpack.
The returned map ({key:value}) is then used by providing key as a file extension used in test: for a loader object. The value is used as the loader object.
Which would like like this:
{
test: /\.(key)$/,
use: [
{
loader: '//ld//-loader',
options: {
/*Options passed to generateLoaders('//ld//', options)*/
},
},
],
}
Where key is the file extention. In this case that would be either sass or scss. And //ld//is the loader you which to use. Which is shown in Step 3 as 'sass'.
Hopefully this clears up some stuff. Took me a while because I just started using Vue.
I installed the vue-spinner with npm install vue-spinner --save-dev,
and I am trying to use the spinner on my file, but when I use the import
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
I get this error:
node_modules/vue-spinner/src/PulseLoader.vue:1
<template>
^
My gulpfile is requiring vueify, here is it:
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.sass('app.scss','public/assets/css/')
.browserify('Main.js');
});
You actually don't need to require laravel-elixir-vueify in your guilpfile, it's easier just to install the original vueify (version 9 for Vue 2.0):
npm install vueify --save-dev
Then add the following to your package.json:
"browserify": {
"transform": [
"vueify"
]
}
Now elixir will use the vueify transform automatically when browserify is called.
EDIT
I just took a look at the vue-spinner page and it says that when using browserify you need to do the following:
import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js'
So that may fix your problem without the vueify step, however, I still recommend avoiding the elixir add ons for the time being because their versioning is all over the place at the moment with Elixir 6 about to be released and Vue 2 being newly implemented in laravel.
I have elixir set up to watch changes in .scss files, but changes in _partials.scss are not being watched.
elixir(function(mix){
mix.browserSync([
'resources/assets/bower/bootstrap-sass/assets/**/*'
], {
proxy: 'site.app',
reloadDelay: 200
});
});
When I edit the bootstrap/_variables.scss, gulp does compile those sass changes. If I exit gulp watch, and gulp watch again, then those changes appear.
So I know its compiling correctly, its just somehow not watching those partial files.
Any ideas? Thanks in advance!
This is already in a pull request on the repo. (https://github.com/laravel/elixir/pull/377)
Until fixed, I'm gonna apply the same fix for now as Ricardo (see https://github.com/ricardogobbosouza/elixir/commit/948abb930e0d822a6fa6a8531d52a8d51632c59b)
Laravel elixir already comes with bunch of its own dependent node modules. How to use that modules instead of creating dependency in the root package.json.
For example, I want to use "del" package which is already there in /node_modules/laravel-elixir/node_modules/del, so rather than mentioning it on the /package.json, how can use this one?
You could try to set up your gulp file like this:
var gulp = require('gulp'),
del = require('del');
gulp.task('default', function() {
});
gulp.task('watch', function() {
gulp.watch('resources/**', ['default']);
elixir(function(mix) {
//Standard elixir code
});
});
Do note typing $ gulp in cli won't do anything anymore, unless you define something in the default task. $ gulp watch will work as always though.
I have no idea if this works without first requiring the dependency in package.json, but give it a try :)