I am sorry upfront for the pretty noobie question, but I don't know how to import plugins installed with npm. I would like to use this plugin for Vue, I have installed it with npm, in my project, and would like to import it to my main app.js file so that I can use it in Vue.
I have tried with using the path to the file in dist folder:
import MaskedInput from 'node-modules/vue-masked-input/dist/MaskedInput.js'
Vue.use(MaskedInput);
But, that obviously didn't work, what is the right way to do this?
Following the link this is actually a component, so what you could do in your component is:
import MaskedInput from 'vue-masked-input'
export default {
components: {
MaskedInput
}
}
What usually helps is by clicking through to the actual github page, and look for either an example in the README or in the actual code. In this case:
https://github.com/niksmr/vue-masked-input/blob/master/src/App.vue
There it shows you how you can use it 'in real life'
Related
I created blank Vue3 + Vite project using
npm init vue#3
I am wondering how can I install my components from src/components like for example in lodash library:
npm i lodash.debounce or my-app/component
Thank you!
I have tried to create index.js file in src and export components:
import Button from "#/components/Button/Button.vue";
import Header from "#/components/Header/Header.vue";
export default {
Button,
Header
}
but it didn't work.
I found a solution, it is called Monorepos, Lerna implements the thing I need.
Here is the link
I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})
You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.
you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))
The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?
Right now I pull in all my own es6 modules and create a bundle using Rollup.
Recently I started using VueJS, which now has an ES6 Module which can be pulled in just like my own modules. Rollup does some treeshaking on it, but I don't know if that is a very good idea? I don't know what it is doing, so I would rather it does nothing!
Instead I just add vue at the end of my HTML:
<script src="dist/bundle.js"></script>
I love the convenience of having everything as one bundled file, but should I really treeshake the entire Vue app, is there a command in Rollup that I can not treeshake just this one module?
EDIT
I have found the --external option, which seems good as it would just keep the import for vue and bundle the rest, but it does not seem to work!
When I use rollup --format=iife --external=../node_modules/vue/dist/vue.esm.browser.js --file=dist/bundle.js -- src/main.js it says Error: Could not resolve '../node_modules/vue/dist/vue.esm.browser.js' from src/app.js.
In my main.js it has import Vue from '../node_modules/vue/dist/vue.esm.browser.js; which works fine for the app. I want to make Vue an external, but it won't work!
To prevent Rollup from treeshaking a particular module, you can simply import it blindly (instead of a part of it), so that Rollup thinks the module performs some side effect:
import 'vue'
Of course you can still import some bits in parallel, so that you can rename the default export for example:
import 'vue'
import Vue from 'vue'
As for your --external option, you probably just need to wrap the path value with quotes:
--external='../node_modules/vue/dist/vue.esm.browser.js'
Note that you should probably switch to Rollup configuration file (instead of CLI options) to make your life easier. You will also be able to use rollup plugins, e.g. rollup-plugin-alias to manage the exact location of the Vue file you want to use.
I am working on a simple app in react with ES6 and babel. Recently I faced this issue. I used react-notifications package here: https://github.com/minhtranite/react-notifications
I just followed the docs and it works fine. I can import it with import {NotificationContainer, NotificationManager} from 'react-notifications';
But then I tried to work with this: https://github.com/cezary/react-loading
Now in the example of react-loading, the developer isn't using the ES6 way to get the component. I tried to look at the JS file and tried this after doing npm install react-loading:
import {Loading} from 'react-loading'; but somehow this doesn't work. I get this:
You likely forgot to export your component from the file it's defined in
But I can see it is exported. What am I doing wrong?
Since it is a single module, it is exported as default. You'll have to do this:
import Loading from 'react-loading';
I've been trying to import the sjcl library, which has many files, but I'm only able to import 1 file from it.
From command line:
npm install sjcl --save
react-native link
In a RN JS file:
import sjcl from 'sjcl';
Looks like this doesn't import everything in the sjcl node package, it only imports file sjcl.js from node_modules/sjcl/. I also need sha1.js from node_modules/sjcl/core/sha1.js. I've tried various ways of importing it, but nothing works.
How can I import an entire npm library into a React Native project?
I had the same problem trying to load the ECC module, here is how I worked around it (I installed sjcl using npm). Create a file LocalExports.js in which put this
import sjcl from 'sjcl';
export {default as sjcl} from 'sjcl';
window.sjcl = sjcl;
then import like this in any other file
import {sjcl} from './LocalExports';
import 'sjcl/core/bn';
import 'sjcl/core/ecc';
*edit - I just found this link, which is the official way to do this
https://github.com/bitwiseshiftleft/sjcl/wiki/Getting-Started