I am building a Vue3 npm component library with hopes that I could access the current router with vue-router's useRouter, and it would be automatically provided by whatever vue app is importing my library components.
If my library components are referenced directly import myCompThatUsesRouter from '../../myCompThatUsesRouter.vue the router works.
If I reference the same component via the node_module package import myCompThatUsesRouter from '#myPackage' router is undefined.
I also get a vue warning
injection "Symbol()" not found.
Is this not how these inject methods are intended to work?
The issue was that my library defined vue-router as a "dependency", not a "peerDependency".
https://nodejs.org/es/blog/npm/peer-dependencies/
Also my vite config needed to define vue-router as "external"
vite.config.ts
rollupOption: {
external: ['vue', 'vue-touer']
}
Related
I have a problem, I cannot use SSR from the official documentation https://ssr.vuejs.org/ in any way, I could not include any module using the native way of creating SSR. I always get an error window is not defined even if the module has adaptations for SSR. Why is vue-server-renderer not working?! Why should I definitely use Nuxt.js?
My project use vue v2.x and webpack v4.x.x, because SSR modules with Vue2 is not working with webpack version 5.x.x, but I guess that's not the reason
For example i use vue-js-modal module, which having ssr include files, but it is not working, if i include it with code
import Vue from 'vue'
import VModal from 'vue-js-modal/dist/ssr.nocss'
import 'vue-js-modal/dist/styles.css'
Vue.use(VModal, { ... })
I getting this errors
vue-ssr-server-bundle.json
Compilation Time: 749.594ms
ReferenceError: window is not defined
at Module.o.m.n (/var/www/contest.mathzilla.org/public_html/frontend/node_modules/vue-js-modal/dist/ssr.nocss.js:1:14289)
at o (/var/www/contest.mathzilla.org/public_html/frontend/node_modules/vue-js-modal/dist/ssr.nocss.js:1:32717)```
I want to be able to use Vue components distributed over CDN without the need to npm install them - in my single-file Vue components.
I do not understand how to import them by URL to compiled component.
Example of components I want to import is
https://unpkg.com/vueperslides (from https://antoniandre.github.io/vueper-slides/#installation)
As I understand there is a way to load JS file in mounted() hook or something, but I don't understand how to import exports from it after.
Answers I tried include
https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/
How to add external JS scripts to VueJS Components
and many others.
I am building a web app using Quasar Framowrk on Vue.js v2
I have built some components such as modals and reviews that I want to use and reuse just about everywhere in my site.
I have made a single global.js file in the plugins folder, So iv'e just registered this in my nuxt.config.js file once.
In my global.js file i've imported vue and called the components
import Vue from 'vue';
Vue.component('component-modal', () => import('#/components/modal'));
Vue.component('component-modal-other', () => import('#/components/modalOther'));
Vue.component('component-reviews', () => import('#/components/reviews'));
The reason for this is that now I don't have to do component import on every instance that I want to use it for I just call the component <my-component>.
However I've just switched to Universal mode and i'm now getting hydration warnings that are all coming from my global.js components file that I made in my plugins folder.
Should I not have a global.js file and each component that I want to use globally have it's own file in the plugins folder? Or do I just need to import the component when I need it locally in the file that is requiring it?
What is the best way to re-use and register global mini components that I have created?
Vue Warning
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render
The only way I can avoid this warning is not to put my components into a global.js component file and register it with Nuxt plugins. Only use the component import into each instance which kind of defeats the purpose of global components
try this
import Modal from '#/components/modal'
Vue.component('Modal', Modal)
in your view
</modal>
I've build a Vue JS 2.x plugin using the vue create <my-plugin-name> and the vue-cli-plugin-p11n plugin. I have a directory structure that consists of a dist/ directory with a few compiled JS files and a main src/ folder containing my components.
I'd like to use these components within Nuxt JS 2.4.x.
I've created a plugins/LesForm.js plugin, and have added '#/plugins/LesForm' to my array of plugins within nuxt.config.js.
My plugin file consists of:
import Vue from 'vue'
import LesForm from 'LesForm'
Vue.use(LesForm)
I'm then trying to import the plugin with it's component into a page by doing: <LesForm></LesForm> within my page.
I initially get the error of:
Failed to mount component: template or render function not defined., but adding the following to my script tag of a page seems to remove that error, but this doesn't seem right?
<script>
import LesForm from 'LesForm'
export default {
components: {
LesForm
}
}
</script>
without this, my page breaks, and adding it I get: Failed to mount component: template or render function not defined. as an error with no sign of my Vue plugin that I've made with some markup.
I'm using the Vue Cli service to build my plugin via NPM.
Attached is a screenshot of my plugin directory structure:
I'm trying to test if validation works for a form with vee-validate and vue-test-utils. I also use nuxt and have created a custom plugin which install vee-validate and provides two custom computed properties as a mixin.
The problem is that I need a way to use these mixins within a localVue instance, however, I cannot just import the whole file as it results in vee-validate being installed two times on the main vue instance. I also cannot just say localVue.use(MyCustomVeeValidatePlugin) because the plugin doesn't have an install method ("plugins" in nuxt are somewhat different than in vue).
What works is creating a file which exports isFormValid and isFormChanged and then have the plugin import these methods. Then I also need to import these methods in the test file and create a mixin for the localVue instance. I would much rather prefer defining the mixin in a single plugin file. I know this is very specific but has anyone had a similar problem? I could imagine rewriting the plugin to be more like it is defined in the Vue.js docs (with an install method) and install it somehow.
Plugin:
import Vue from "vue";
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);
//create global mixin for checking if form is valid
//note: every input element needs a name
Vue.mixin({
computed: {
isFormValid() {
return Object.keys(this.fields).every(key =>
this.fields[key].valid);
},
isFormChanged() {
return Object.keys(this.fields).some(key =>
this.fields[key].changed);
}
}
});
As far as I know, based on the recommendations I read in "Testing VueJs Applications (https://www.manning.com/books/testing-vue-js-applications), the author, who is also the main author of the vue-test-utils recommends:
I’ve already spoken about why you should use a localVue constructor and avoid installing on the base constructor. This is especially important for Vue Router. Always use a localVue to install Vue Router in tests. You must make sure that no file in your test suite imports a file that calls Vue.use with Vue Router. It’s easy to accidentally import a file that includes Vue.use. Even if you don’t run a module, if the module is imported, then the code inside it will be evaluated.
Based on that recommendation, I moved Vue.use() calls out of files like store.js and router.js and into main.js, which isn't used during testing.