I'm writing a Vue component library let's call it my-component,
when I download it from npm or use npm link to test in vue/cli application,
import { component } from `my-component`
It will fail on IE... but fine with chrome
But if I put my library's source code under my application folder,
import { component } from './lib/my-component/entry.js'
everything goes well.
Why webpack/vue-cli build differently in two ways?
Did I need extra settings to publish my component as a library?
Related
I made a fairly simply Quasar component library using Vite.
npm install avvinue-clowder
However, I'm now unable to get it to work as intended within other Quasar apps.
For example if I do:
import { AVRow } from 'avvinue-clowder'
and use it within the template:
<AVRow>Foobar</AVRow>
I get the following error:
I think its because Quasar doesn't get exported with the components. Anyone know how to do that?
Here is my repo: https://github.com/RizaHKhan/clowder/tree/master/src for reference.
Note:
I know this library works because the exports that are pure Javascript, work fine. Its just the Quasar based components that throw errors.
I'm building an npm package that contains some WebAssembly loaded from Emscripten module "glue code".
For now, the WASM is fetched from the glue code via a static specified URL
// emscripten glue code
import rppgLoader from './set_asm.js';
async load() {
// load webassembly code
this.instance = rppgLoader({
locateFile(path) {
return `${process.env.PUBLIC_URL}/wasm/set_asm.wasm`;
}
});
This URL is application-specific and therefore not compatible with an npm module where everything has to be included and compatible with most build systems (webpack, browserify, ...)
I tried following a gist by google engineer #surma that aims at making wasm/emscripten and webpack work together but got no luck (see last comment on the gist)
What I'm trying to achieve is a npm module transparent for the user. E.g this:
npm install x
import { y } from "x";
should work. That include the wasm code and is compatible with most bundlers.
Is this possible? And if so, is there any examples of npm package that made it work ?
Cheers!
I bundled a WASM module into the opus-stream-decoder NPM package. package.json uses the main property to declare the WASM entry point. Also have a look at the test-* files that show import it, using the new ES Modules import syntax or the older require()
I would like to create a npm repo containing a folder with Vue single file components from which I can import then easily:
import { Button } from "#user/design-system"
the problem I have is that the Button.vue contains variables coming from a global .scss file that is handled by Webpack.
How can I bake the variables into each component when I build for the npm release?
So essentially I want a dev environment which I run by npm run serve and I want a npm run build which copies all components and bakes the CSS variables into it to have stand-alone components.
You should have this variables in a dedicated file (for example _variables.scss), in your project where you want to import your component. Then you should make this variables accessible to all the components. I suggest you to use style-resouces-loader, that will import your variable in every component. Vue ClI wrapper - vue-cli-plugin-style-resources-loader.
To export your UI library with already inlined CSS, you should build your UI library through vue-cli-service build. And then you can import your builded component with builded CSS styles, which was built from SCSS.
I have a Vue.js application that imports private npm packages that are Vue.js libraries:
// Vue.js app
import { someComponent } from '#private-npm/some-library';
The someComponent has some code that looks as such:
// someComponent
const username = process.env.USERNAME;
When I build some-library, so that I can publish it to my private repo, it writes the process environment variables in plain text inside the bundle file.
So my concerns:
Even though my npm is private, I feels like bad practice to have my environment variables written to the module which someone can install and view inside node_modules.
I need to be able to build the Vue.js app that uses the library with different environment variables
So, in summary, I need my bundled library to not import the real value of the process environment variable and instead leave it as process.env.USERNAME so when the Vue.js app builds it can dynamically change that variable via a .env.
I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.
I thought it would just be a matter of:
Create a github repo for the shared components
Author the plugin
Reference the repo in consuming apps via npm install
Here is the gist of the plugin:
// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";
export default function install(Vue) {
Vue.component("myComponent", MyComponent );
Vue.prototype.$myApi = api;
}
At the moment, the behavior I'm seeing is:
GOOD
plugin install function is being executed
functions from api attached to Vue.prototype are available in app components
my-component is available in the app and renders markup
BAD
$myApi and Vuetify components are not available in an application instance of of my-component
If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.
I've tried these alternatives with the same issue:
use npm link to link the plugin module to the app
manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"
I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.
The 2 options I have are:
Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
Compile the .vue files in the library module and include them in the source such as ./dist folder.