in vue.js how do I serve components that require js libraries? - javascript

So I'm new to the Vue CLI and one of the features that I would like to use is
vue serve <component name>
The problem I am immediately running into is there are some js libraries like moment that I am using in those components, so do I need to add an import statement in my component just for local testing? Is there anyway to set this globally and if so can I access it when i try to serve an individual component?

Once you run npm i -s moment, you can either import moment in your main.js Vue entry point, like this:
import moment from 'moment';
Vue.use(moment);
Or, you can use it locally in your component script, with just a local import within the <script></script> tag.
import moment from 'moment';
My preference is the former, since it allows me to reduce duplication if I need it in multiple files. Either way, to access in a function, once it is imported in one of those two ways, you can use it in component methods and lifecycle hooks.

Import your plugins in your main.js and then use like so;
import Vue from "vue";
//this is called only once before you start importing other packages
import YourPlugin from "yourplugin";
Vue.use(YourPlugin)

Related

Is there a way to use the screenfull javascript library within the Nextjs framework?

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?

Nuxt plugin imports abuse vendors

I am trying to use vuejs-datepicker in a nuxt app, everything is done by nuxt plugin usage standarts.
plugins/vue-datepicker.js
import Vue from 'vue'
import Datepicker from 'vuejs-datepicker'
Vue.component('Datepicker', Datepicker)
nuxt.config.js
plugins: [
{ src: '~/plugins/vue-datepicker', ssr: false }
],
But even when it is not used I am getting its dist uploaded in the vendors/app....js after the build. How can make nuxt create a separate chunk for it and import that chunk only in the pages which are using it?
So yeah, there is basically a feature request open for this kind of use-case.
But looking at the Nuxt lifecycle, it looks like the plugins are imported even before the VueJS instance is done. So, you cannot lazy load it if it's done ahead of Vue.
But, you can totally import vuejs-datepicker on the page itself, rather than on the whole project. This may be enough
import Datepicker from 'vuejs-datepicker' // then simply use `Datepicker` in the code below
If it's not, you can maybe try this solution: https://github.com/nuxt/nuxt.js/issues/2727#issuecomment-362213022
// plugins/my-plugin
import Vue from 'vue'
export default () => {
// ...
Vue.use(....)
}
// adminLayouts
import myPlugin from '~/plugins/my-plugin'
export default {
created() {
myPlugin()
}
}
So, the downside is that you have to import the component each time that you need it rather than having it globally but it also allows you to load it only on the concerned pages too and have it chunked per page/component.
If you were trying to find a way to split the component from vendor but you were getting a document is not defined error you can use this syntax to import your component, it will create a separate chunk with your component and use it only in client-side.
components: {
Datepicker: () => import('vue-datepicker')
}
Also, it would be helpful to wrap your component in <client-only> tag for most of the cases.
The plugin I was trying to import used window. For this reason, any other suggested workaround still caused nuxt to crash or error in my case. I searched the whole wide web and the solution below is the only one that allows my app to run.
Instead of importing the plugin with an ES6 import, you can import it in your mounted hook, which should run in the client only. So:
async mounted() {
const Datepicker = await import('vuejs-datepicker');
Vue.use(Datepicker);
}
I do not know about the specific plugin you are trying to use, but in my case I had to call Vue.use() on the default property of the plugin, resulting in Vue.use(MyPlugin.default).

Vue.js - import external vue component

Situation
I use vue-cli tool to build my project.
In some reason, i need to dynamic import vue component like () => import(`/compiled/component/${var}.js`) from local, which is generate by system in runtime or generate by vue-cli-service.
Is it possible?
i have try many times but never work.
dose there import/export interface different?

How can I exclude an ES6 module (VueJS) from treeshaking in RollupJS? (and should I?)

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.

Wrap components of npm and export it as custom component

There's a problem installing 3rd party components from npm. For example there's a dropdown react module, I can use it easily in my module. But I have to declare its style and other dependencies of the component in many modules of mine.
Like for this component
I have to inject its style in every of my module
import 'icheck/skins/all.css';
How to solve this problem?
Assuming you're using a dropdown library, which we'll call Dropdown, you could create a custom module, called MyDropdown, where you import your CSS and export Dropdown.
All other modules that use Dropdown would import it from MyDropdown. The CSS will have been loaded along with it.

Categories