I installed particles.js with: npm particles.js --save
Error: bundle.js:54 GET http://localhost:8080/particles.json 404 (Not Found)
I have tried different paths but it doesn't seem to work.
In the file app.js:
import 'particles.js/particles';
const particlesJS = window.particlesJS;
particlesJS.load('particles-js', 'particles.json', null);
Folderstructure:
- index.html
- src/js/app.js
- src/js/particles.json
try this:
import "particles.js";
particlesJS.load('container', 'particles.json', function () {
console.log('loaded');
});
Related
I am trying to compile my vue component to unit test it.
I added the import { render } from "#vue/server-test-utils"; line at the beginning of my test file. I also run the command npm i --save-dev #vue/server-test-utils which completed successfully. I checked the node_modules folder that the dependency was indeed installed.
But still when I run the test file I am getting the error:
WEBPACK Failed to compile with 1 error(s)
Error in ./node_modules/#vue/server-test-utils/dist/vue-server-test-utils.js
Module not found: 'vue-server-renderer'
Here I found a similar issue. I tried adding the
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.isServerBuild = false;
return options;
});
}
to my webpack config, but it did not help.
I am using Vue 2. Maybe someone happened to stumble across this issue and knows a solution?
npm install --save-dev vue-server-renderer #vue/server-test-utils worked.
It seems that we have to install the two packages: the vue-server-renderer and then the #vue/server-test-utils.
I would like to import pdf-lib into my vue.js application.
Installed using npm
npm install --save pdf-lib
Imported into my component like this,
import _ from "#pdf-lib";
export default {
data() {
I get the following error message,
Module not found: Error: Can't resolve 'pdf-lib' in
I have a small problem that took some time to find a solution. I'm trying to import this library to my project in Laravel.
https://www.adchsm.com/slidebars/help/usage/initializing-slidebars/
I have installed the library with NPM.
npm install slidebars --save-dev
Then I'm trying to import this library to my app.js file which has the following structure:
import jquery from 'jquery';
import popper from "popper.js";
try {
window.$ = window.jQuery = jquery;
window.Popper = popper.default;
require('bootstrap');
require('slidebars');
} catch (exception) {
console.log(exception);
}
$(document).ready(function () {
let constructor = new slidebars();
});
run npm run watch but then in my browser I get the following error in the console:
ReferenceError: slidebars is not defined
Please, if you could help me, I have searched in different places, but I can not find a solution for it. Thank you very much in advance.
Run...
npm install slidebars
+ slidebars#2.0.2
added 1 package and audited 16905 packages in 9.487s
found 0 vulnerabilities
In /resources/js/app.js add...
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
window.slidebars = require('slidebars');
require('bootstrap');
} catch (e) {}
Then compile the assets:
npm run prod
I have a custom component in my page, defined as:
Vue.component('payment-page', {
template: '#payment-template',
data: function () {
return {
...
}
},
components: {
DatePicker
},
});
Now, in this component, I need to use a datepicker/daterange picker, of which I found this to be most helpful. It can be installed from NPM using npm install vue2-datepicker --save. I am using browserify so as to be able to use the datepicker in the browser, inside my component above.
For browserify, inside my main.js file I have this:
let DatePicker = require('vue2-datepicker');
then I use the command browserify main.js -o bundle.js to create my bundle.js file which I then import in my HTML file.
Problem is I always get the error Uncaught ReferenceError: DatePicker is not defined. Anything I'm doing wrong?
I installed vue-chartjs and also added chart.js both using NPM
When I run npm start my server is started but in broswer console i get an error
TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Doughnut.extend is not a function
I'm not sure what this mean. I reinstalled all packages also installed this packages separete using npm install vue-chartjs
Can you show your code of your component? Webpack 3 ?
With vue-chartjs version 3 you have to create your components this way:
import {Doughnut} from 'vue-chartjs
export default {
extends: Doughnut,
mounted () {
this.renderChart(data, options)
}
}