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
Related
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.
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.
Does anyone on earth have a working version of the dotnet new vue template (https://github.com/aspnet/templating/tree/dev/src/Microsoft.AspNetCore.SpaTemplates) with the latest Vue 2.5.13 and Vuetify? VS2017 gives me a bunch of errors, including including Error TS2709 (TS) Cannot use namespace 'Vue' as a type. VuetifyDotnetCore2Sample-master (tsconfig project) C:\Repos\VuetifyDotnetCore2Sample-master\node_modules\vue-router\types\router.d.ts
Found various hacks e.g. adding this in a d.ts file and referencing in tsconfig and nothing works:
import _Vue = require('vue')
declare global {
const Vue: typeof _Vue
}
Please help, I'd really love to get going with this (new to Vue) but off to an incredibly rocky start. Here's a sample repo: https://github.com/Dev-Squared/VuetifyDotnetCore2Sample
I saw no one posted an answer to your question. You should check out this repo as it uses the latest Vue (2.5.13) with an older version of Vuetify.
https://github.com/Dev-Squared/VuetifyDotnetCore2Sample
It's at least a starting point with something that uses Vuetify. I've been trying to do the same as you getting started with Vue and Vuetify, but it's rediculously difficult because any small thing you do will break everything.
Good luck :)
I'm using #ngx-translate for language handling in an Angular 5 app I'm creating. The app has two feature modules, one lazy loaded and one eager loaded.
The problem is that the translate pipe works fine in the eager-loaded module but not the lazy-loaded one. How can I fix that?
In my lazyload modules i had to add this to imports:
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
also in lazyloaded component i did something like that:
import {TranslateService} from '#ngx-translate/core';
in constructor:
private translate: TranslateService
and finally onInit:
this.translate.use(language);
And it is working just fine.
I've also been struggling with the same problem and have yet to find a feasible answer.
The kind folks at Angular are working on i18n, but this may take more time.
While not ideal, you might want to check out the following article:
“How to split your i18n file per lazy loaded module with ngx-translate?” #frogeret https://medium.com/#TuiZ/how-to-split-your-i18n-file-per-lazy-loaded-module-with-ngx-translate-3caef57a738f
You can check the ngstack/translate library that works for Angular and Ionic apps. Also provides support for lazy loading, page title translations, custom pipes and many other great features.
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.