I'm using laravel 5.4, with webpack and vue. I'm not sure how to add new libraries to use in vue.
For example, I run
npm install --save jquery vue2-select
What do I need to do next? I need to add:
Import Selectize from 'vue2-selectize'
or
Require ('vue2-selectize')
In the
resources / assets / js / app.js
file or
resources / assets / js / bootstrap.js
?
Can someone help me with the correct order to work?
Thank you!
import or require do almost same thing. But import is more popular.
npm install --save jquery vue2-selectize You should run this in your root folder and npm will place those packages in 'node_modules'. Then import command will look in 'node_modules' and load it to your file.
import Selectize from 'vue2-selectize' in that file where you want to use Selectize.
resources / assets / js / app.js yes, this is where your front-end app start from. In vue documentation you can read more about single file components
watch this laracast series and may be some other. They are easy to follow.
Related
Long story short. I've installed a package via NPM into a Laravel Application. I have run npm run dev, which has built successfully; I have also run npm run watch while developing the application.
I have also put this line in the app.js file:
import Push from 'push.js';
And I have included the:
<script src="{{ asset('js/app.js') }}" defer></script>
line into my main template file.
However I'm still getting this error:
Push is not defined
When trying to use the package.
(Here is the package)
(Laravel 5.8)
If you're trying to use it outside of your app.js (and its children via import or require), like in a Blade template, you probably need to do window.Push = Push in your app.js to make it available globally. You can see this in Laravel's default install in the resources/js/bootstrap.js. For example:
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
I want to add a carousel plugin into laravel.
https://github.com/OwlCarousel2/OwlCarousel2
so I run npm install --save owl.carouse and add following code into index.blade.php
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
The owl.carousel.js is inside my project, but when I run npm run watch, and look at the browser, there show an error in the console:
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
Why is that?
You should not import it through a script tag. Add it in your bootstrap.js file
require('owl.carousel');
require() will use the node_modules as the root dir
You can of course use require in any other .js file that you then import through a script tag.
If you are using VueJs you do at the top of the vue component
import owl from 'owl.carousel'
Your web server does not have access to node_modules directory.
You'd better use gulp to copy and bundle it to public directory.
Or else if you want, you can do it manually. Copy the script to the public directory.
I usually make asset/js directory under the public and then copy owl under it.
You will have:
<script src="/asset/js/owl.carousel/dist/owl.carousel.js"></script>
Add this line in your main .scss file:
#import '~owl.carousel/dist/assets/owl.carousel.css';
Compile the css with npm run dev
You can repeat these steps for your javascript files
Edit:
If you do not make use of Laravel mix yet, read this documentation first. https://laravel.com/docs/5.6/mix
(Disclaimer: I'm not very proficient in Vue)
What is the correct way to import/include a Vuejs package in my project? I somehow seem to not be able to import a file.
I'm trying to import this package: https://github.com/sagalbot/vue-select
What I have done so far:
Ran the command: npm install vue-select
Tried adding the vue-select package to my Vue like so (in
resources/assets/js/app.js):
import vSelect from './components/Select.vue'
Vue.component('v-select', vSelect);
Now when I use the v-select in my HTML file it gives this error in console: [Vue warn]: Unknown custom element: <v-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What I've tried to fix this:
Instead of using this in app.js I used it in my *.vue file, I don't use webpack/browserify I think, so import doesnt work :/ I prefer not to use browserify.
I have vue-resource package aswell and that created a vue-resource.js file in my public/js directory which I can import to use vue-resource. It seems like vue-select doesn't create its own vue-select.js file.
If you have any suggestions, please let me know.
I have looked at this question: Import vue package in laravel but I don't understand what paths and files the lines should be added to.
I think this is hust your import statement. If you have installed it through npm, then you should import from vue-select. Also, use require instead of import, This way:
Vue.component('v-select', require('vue-select'));
You may want to use it only in your Vue component, then you should load your own component as explained above, And in your own vue component say VueSelect.vueuse this:
<template>
<!-- use it with name 'v-select' in your component -->
<v-select></v-select>
</template>
<script>
export default {
...
components: { vSelect: require('vue-select') },
...
}
</script>
Then you can register your own component a s global,
Vue.component('vue-select', require( './components/VueSelect.vue') );
And use it in your root component:
<vue-select></vue-select>
Update
If you are using laravel, it gives you laravel mix out of the box which compiles down your assets using webpack. All you need to do is run a compile script:
npm run dev
If you are making changes to your js files, you wouldn't want to run this over and over, so you can run watch command:
npm run watch
If this doesnt work for you, try watch-poll instead. Als, make sure you have installed all dependencies first:
npm install
I've created clear vue-cli webpack project, installed font-awesome via npm.
Then inside ./assets/scss/styles.scss I'm importing it (#import '~font-awesome/scss/font-awesome.scss';).
When I run npm start there are errors:
These relative modules were not found:
* ../fonts/fontawesome-webfont.eot in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scss/styles.
scss
* ../fonts/fontawesome-webfont.eot?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.svg?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.ttf?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.woff2?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/sc
ss/styles.scss
* ../fonts/fontawesome-webfont.woff?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scs
s/styles.scss
How can I fix it? Thanks!
OK, it was an easy fix. It was need to include:
$fa-font-path: "~font-awesome/fonts";
for proper fonts import.
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.