We Keep Coding

How to import node-menu package to my project instead of use require

how can I import node-menu to my typescript project instead of using requiere, like this:
const menu = require('node-menu');
When I import node-menu to my project the next errors appears:

You're importing the menu probity from node-menu instead of the entire module. To fix this, change:
import menu from 'node-menu';
to
import * as menu from 'node-menu';

Bootstrap 5 Webpack plugins are not fully functional

I imported the Bootstrap 5 plugin as documented using Webpack
import Offcanvas from '../node_modules/bootstrap/js/dist/offcanvas';
import Dropdown from '../node_modules/bootstrap/js/dist/dropdown';
import ScrollSpy from '../node_modules/bootstrap/js/dist/scrollspy';
The events are working fine as below:
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})
But when I want to create an instance:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
I get an error:
Uncaught ReferenceError: bootstrap is not defined
I would be grateful for any help in this matter

Try new Offcanvas() instead of new bootstrap.Offcanvas():
var bsOffcanvas = new Offcanvas(myOffcanvas)
Yes, the Bootstrap 5 documentation states you can use bootstrap.Offcanvas, but in your case, you don't import bootstrap, you import Offcanvas directly. That's why bootstrap isn't defined.

prismjs not working between different routes using vuerouter in vuejs

I've imported prism.js globally in main.js file.
Code block syntax highlighting working fine in Home components, but after routing to another page using vue-router, there is no effect.
in main.js
// Global Import
import 'prismjs/prism.js'
import 'prismjs/components/prism-swift.min.js' // swift lang
import './theme/prism-swift-theme.css'
in my about page component...
<pre><code class="language-swift">
private func setupSubviews() {
let value = "Loading code block";
}
</code></pre>
Unable to understand what's wrong here. Is there any way I can import node_modules prismjs files globally? I thought keeping main.js will work fine, but it's not adding globally between routes...

Once you install it with npm the best approach is to import it whenever it is used in each component seperately with import Prism from 'prismjs'. Just make sure to use the Prism.highlightAll() method in the component where you're using prism after the DOM is rendered whether in mount() hook or in the updated Vuejs hook using nextTick method to make sure all the DOM is rendered before using prism. So in your case you should use it this way:
import Prism from "prismjs"
updated: function () {
this.$nextTick(function () {
Prism.highlightAll();
})
}
make sure you call highlightAll in yor components seperately and not globaly.

how use npm packages with Vue SPA

i have created Vuejs app using vue-loader,now i need to use an installed npm package as follow :
var x = require('package-name')
Vue.use(x)
but i have this error :
Uncaught TypeError: plugin.apply is not a function
dose Vuejs require a special type packages or it can work with any JavaScript package and this error can be solved

There are many approaches.
I am adding with respect #smiller comment and thanks for sharing the link . I am adding information here in case the link someday not work .
Credit to this link :- https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
First approach of-course #crig_h
window.x = require('package-name')
There are certain drawback . don’t work with server rendering . Otherwise everything will work fine in browser as window is global to browser , any properties attract to it will be accessible to whole app.
The second approach is .
Use Import with the js portion in the .vue file , Like this.
if inside the '.vue' file.
<script>
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}
</script>
If you have seperate file for .js then same like this there will we no <script> tag.
And Third method
where ever in the project you import vue. You can write this statement
import Vue from "vue";
import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });
This will set the relevant properties to to Vue . And you can use it any where like this . As Vue is global scope of app.
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}
ADDED FOR CSS
you can do import in src/main.js file in vue.js project .
import './animate.css'
Also if you like to import in template .
Inside the template you can do this.
<style src="./animate.css"></style>
Also have a look on css-loader package . what it does ?

Plugins are specific Vue packages that add global-level functionality to Vue, so if you aren't using a Vue plugin then you don't need to register it with Vue using Vue.use().
In general there isn't any issue using non-vue-specific packages via npm but if you need to register something globally, you can usually get away with simply attaching it to window like so:
window.x = require('package-name');

Unfortunately none of these answers worked for me what i ended up doing is
export default {
computed() {
x () {
return require('package-name')
}
}
}
And then use it as x.functionName() or whatever

There is better solution ... First import your package in main.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
import Vue from "vue";
import App from "./App.vue";
import "package-name";
After that's you code inside mounted method as javascript
<script>
export default {
mounted() {
const any = require("package-name");
// your code as normal js
},
};
</script>

One node module, two libraries, one export in ES6

For the time being, until the library is split into JS frameworks specific repos (React, JQuery, Angular, etc.), I have multiple libraries within one npm module (yes, that right there is an anti-pattern).
But humor me, how do I export one of the libraries without exporting the other? I don't want the jquery module if I'm just using React and there is only one "main" in package.json.
One option would be to import the module via relative directory that is from './node_modules/ui-combined-module/src/react/dist.js';, but that seems rather messy.
For
// Use one of the following in your example code:
// import {react as UILibraryReact} from 'ui-combined-module';
// const Badge = UILibraryReact.Badge;
// import {jquery as UILibraryJquery} from 'ui-combined-module';
// const Badge = UILibraryJquery.Badge;
import * as react from './react/dist';
import * as jquery from './jquery/dist';
module.exports = {
react,
jquery
};

Why not import jquery or react in the code using this module?
import react from 'yourlib'
Or return a function
exports default function (lib) {
if(lib === 'react') return react;
...
}