When running gridsome build I get window is not defined. Anyone has an example of making vue2-leaflet work with the client only option for gridsome?
Wrap your component inside template with <ClientOnly> tag, more info in my other answer
I've been struggling with the same problem (but with other libraries) and the only solution i've found was to copy the package into src/. Something like :
cp -a node_modules/package-giving-me-headaches src/plugins
and
// main.js
import PackageGivingMeHeadaches from "~/plugins/package-giving-me-headaches"
Depending on the package, you may need to target a specific entry point :
// main.js
import PackageGivingMeHeadaches from "~/plugins/package-giving-me-headaches/src"
You know you need to do that when Gridsome tells you :
"export 'default' (imported as 'PackageGivingMeHeadaches') was not found in '~/plugins/package-giving-me-headaches'
Edit : Yes, i know its not ideal and ugly, but i don't have time to fight for it.
Related
I would like to use TroisJS (three.js wrapper for Vue) with Nuxt.js. According to the TroisJS documentation (https://troisjs.github.io/guide/install.html#existing-vuejs-3-project) I need to add it to my project like:
import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);
However, I don"t know how to figure out where I should put this code. I would expect the nuxt.config.js file, but I don't seem to quite get it where it should go.
I decided to use TroisJS and not three.js because I thought the former might be easier to import and use. If importing three.js directly is easier, I don't mind using it.
Thank you very much for any help!
In /plugins folder add new file named troisjs-plugin.js with the following content :
import { TroisJSVuePlugin } from 'troisjs';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(TroisJSVuePlugin )
})
I found a repo with some testing with Trois and Nuxt 3, probably outdated and maybe some apis have changed, but if you wanna check it out: alvarosabu/nuxt3-trois
Also, there's an official repo from the Trois author with a Nuxt 3 custom plugin (probably outdated too) here
I have two Vue projects, one is an app that is injected in an older website via script-tag and a second project, that is a form, that uses own logic and vuetify components. The later should be used in other projects also and gets props from where it is used. Therefore it should be compiled as a library.
If i compile it as app i can transfer data via a global JS variable, but i would like to use the components like any other library. (Just import it and put it in the <template> like so: <MyComponent ..props../>)
If i compile it as a library i got all sorts of vuetify not correctly initialized. After i cleared them my HTML looked excactly like my code (eg:<v-app>...</v-app>) without any errors.
The 'serve' from the standard installation worked without a problem in the component project.
The component project is created with vue create project and modified according to https://cli.vuejs.org/guide/build-targets.html#library
I already searched online and got only so far, my question on the vue discord was left unanswered, so my questions are:
1. Is this even possible to do?
2. If it is, could you please point me in a direction, or give a summary of what i have to do?
3. If not, is there another way of achieving this, except for copying the raw code into each project?
Short answer, yes. Is it recommended, no.
The best way to do this is to export your form component as a library so that it can be imported into other projects but exclude any dependencies like Vuetify, which should be imported separately. This avoids versioning errors.
The Vue docs on packaging for npm are useful as is this article
Can't find any resources online, but i'm trying to optimize our in-house component library, which i'm trying to make more tree shaker friendly.
How with rollup can i leave .css files in the output along with maintain their import in the file.
I.E
Foo.js (inside import "./foo.css")
Foo.css
Output.
Foo.js (inside import "./foo.css" remains) created into module
Foo.css
This seems as straight forward as possible and iv'e found similar threads asking for this but zero responses. https://github.com/egoist/rollup-plugin-postcss/issues/204
Allowing this will basically mean when people who consume my project will only get critical css automatically.
I.E Import { Foo } from "xyz/foo" will automatically import the accompanying css file.
Unfortunately I couldn't find a solution with Rollup for what you're looking for. However, if you're open to using Webpack there's a plugin that would make this possible called MiniCssExtractPlugin. It creates CSS files per JS file and would achieve the structure you're wanting.
So the Vue-Material docs (https://vuematerial.io/components/bottom-bar) says it is possible to create a md-bottom-bar stuffed with md-bottom-bar-item, while being able to make md-bottom-bar-item act like a <router-link>
Their code can be seen right below "Seamless integration with Vue Router" (this is exactly what it's meant for by the way ^^), and my code looks like this :
<md-bottom-bar-item
id="messageRoute"
to="/Messages"
#click="stuff"
md-label="Notifications"
md-icon="message">
</md-bottom-bar-item>
<md-bottom-bar-item
id="settingsRoute"
to="/Settings"
#click="stuff"
md-label="Options"
md-icon="settings">
</md-bottom-bar-item>
These are tabs to a notifications list, and the settings page for my app.
The error I got when I click on an item is literally this (I got it 5 times though, beucause there's 5 items in my navbar) :
[Vue warn]: Missing required prop: "to"
found in
---> <MdButton> at src/components/MdButton/MdButton.vue
<MdBottomBarItem> at src/components/MdBottomBar/MdBottomBarItem.vue
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdBottomBar> at src/components/MdBottomBar/MdBottomBar.vue
<NavBar> at src\components\NavBar.vue
<App> at src\App.vue
<Root>
I got the same error without the #click='stuff' by the way, nothing to do with it.... I guess...
Is it about Vue-Material#1.0.0 (the one I'm using) being in beta or ? It feels like I'm doing what is showed in the doc, I even copy-pasted it and changed things so it would fit in my app.
For now I just did a goTo(path) methods, that just do this.$router.replace(path), but the bottom bar is not sync with Vue's router, with the md-sync-route attribute, like so :
<md-bottom-bar md-sync-route>
<!-- stuff -->
</md-bottom-bar>
Not a critical problem, but damn, why Vue.js, why ??? ^^'
And, what a troll :
Ok, this is interesting.
As the issue you gave me pointed out, this might be a version problem, but my vue version is 2.9.2 (checked it with vue -V). Nevermind, I still ran npm update -g vue, and the answer I got from the terminal... well :
+ vue#2.5.11
updated 1 package in 0.626s
Now everything works fine (router, to, etc...).
But why though ? Does vue-material uses a slightly different vue, or there's some parts that are redefined, like router link's behavior on certain element like md-bottom-bar-item ?
And why npm install couldn't fix that ? Well anyway, now it works, and my last questions exists probably because this framework is a beta and few things have to be done... or because I'm starting to do stuff with npm etc ^^
If you know something it would be helpful for me to know, feel free to tell me, I'd be glad to hear...
It will also happen in 1.0.0-beta-8, but there seems to be a commit to fix
https://github.com/vuematerial/vue-material/commit/6860d3a004b09baef751724c0d9bf1ebdf92b752
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.