I've already used this vue3-google-map plugin in some Vue projects but now I'm working on a Nuxt project and I want to use this here as well. Is there any way to add it to Nuxt?
Here is the documentation:
You should be able to use the vue3-google-map plugin in a Nuxt project.
Install the plugin with terminal:
npm install vue3-google-map
Create a new file called vue-google-maps.js in the plugins directory of your Nuxt project.
In the vue-google-maps.js file, import the vue3-google-map plugin and add it to the Nuxt plugins array:
import Vue from 'vue';
import VueGoogleMaps from 'vue3-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY',
libraries: 'places',
},
});
In your Nuxt configuration file (nuxt.config.js), add the vue-google-maps.js file to the plugins array:
export default {
// ...
plugins: [
// ...
'#/plugins/vue-google-maps',
],
// ...
}
In your Vue component, you can now use the <GmapMap> component provided by the vue3-google-map plugin to display a Google Map.
Related
Purpose: Upload images from quasar project to aws amplify storage.
Installations : aws-amplify library for quasar and vuejs.
=> aws-amplify uses #aws-sdk for built in.
Once this code is added :
import { Amplify, Storage } from 'aws-amplify';
Amplify.configure(config);
I try to build my project: quasar -m build pwa/android/ios throws this error :
'request' is not exported by __vite-browser-external, imported by node_modules/#aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
I saw on github for #aws-sdk this is a common error with vite.
I'm using quasar 2.6.0, aws-amplify 4.3.35
Any suggestions or workaround ?
in quasar.config.js file, you can add below in build section :
extendViteConf(viteConf, { isClient, isServer }) {
Object.assign(viteConf.resolve.alias, {
'./runtimeConfig': './runtimeConfig.browser',
});
},
I have a simple .json file outside of my project. Like this :
| common
| configuration.json
| angular-app
| src
| app
| my-component
| my-component.component.ts
| angular.json
In my-component.component.ts, i want to import configuration.json. I tried import configuration from '../../../../common.configuration.json' but Angular just keep throwing this error :
ERROR in src/app/record/record.component.ts(4,23): error TS2732: Cannot find module '../../../../common/configuration.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
And when i try ng serve --resolveJsonModule, i got this error : Unknown option: '--resolveJsonModule'
I can't move configuration.json. The common directory is shared with other projects.
How do you import a local json file in an Angular project ?
If you're using typescript 2.9+ (Angular 6.1+), you can import JSON modules so it will get compiled into the application. Older version don't support this so that may be your issue.
All you need to do is make sure the following three compiler options are enabled in your tsconfig.json:
{
...
"compilerOptions": {
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
...
}
}
Then you can import JSON modules in any TS file:
import jsonContents from '../../contents.json';
I'm not exactly sure what you mean but I guess you want to use the config values in your component, right?
According to this tutorial this can be fixed by creating a type definition file json-typings.d.ts in your app root folder with the following contents:
declare module "*.json" {
const value: any;
export default value;
}
Try by using http call:
this.http.get(`yourpath/..../common/configuration.json`).subscribe((resp: any) => {
console.log(resp)
});
I'm currently trying to implement Lottie to my Angular web-app.
Somehow I couldn't manage to do so yet. I tried to follow the instructions from github, but that lead to multiple errors, as f.e.:
lottie-player is not a known ng module.
Furthermore, I tried to install ng-lottie for Angular - since the original wasn't working - but this one didn't provide any option to jump to a frame or loop only to a certain frame.
Does anyone know an alternative or a way to get lottie player working?
You can add lottie-player as a custom element schema
npm install --save #lottiefiles/lottie-player
angular.json
"scripts": [
"./node_modules/#lottiefiles/lottie-player/dist/lottie-player.js"
]
custom.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
#NgModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule { }
custom.component.html
<lottie-player src="https://assets4.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json" background="transparent" speed="1" loop autoplay >
</lottie-player>
Hope this helps! and if you managed to implements it with a different approach you can help by sharing it
theres a much simpler approach, install required packages as below
npm i ngx-lottie & lottie-web
in your app.module.ts, add
import { LottieModule } from 'ngx-lottie'; // add this line
export function playerFactory() { // add this line
return import('lottie-web'); // add this line
} // add this line
#NgModule({
declarations: ['your component 1', 'your component 2'...],
imports: [
LottieModule.forRoot({ player: playerFactory, useCache: true }) // add this line
]})
stop your angular server 4200 and start again using ng serve
define options in your component.ts file as
options: AnimationOptions = {
path: 'add animation json file link', // download the JSON version of animation in your project directory and add the path to it like ./assets/animations/example.json
};
then in your component.ts file
import the animation options module at the top of your component as
import { AnimationOptions } from 'ngx-lottie';
then in your component.html
<ng-lottie height="auto" [options]="options"></ng-lottie>
for more information on other attributes of ng-lottie tag visit
https://www.npmjs.com/package/ngx-lottie
I have the following code..
// ui.js (generated by rollup
import Vue from 'vue';
import VueRouter from 'vue-router';
(()=>{
console.log("Wow it actually works");
Vue.use(VueRouter);
const routes = [
{
path: '/',
component: Viewport
}
];
const router = new VueRouter({
mode: "history",
routes: routes
});
window.app = new Vue({ router });
window.app.$mount('#jg-app');
})();
<script src="ui.js" type="module"> </script>
The problem is when I run this I get...
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
This leads me to believe I need a "fat" js that includes dependencies.
I also want to keep everything in es6 modules and avoid introducing say babel.
Is there a way to do this using rollup?
Update
Tried this...
import Vue from "./vue";
But then I get...
Error: Could not resolve './vue' from src/index.js
As far as I can tell this is not possible. I instead had to move the import from the ui project to the server project and create a static js file that looked like this...
//client
import Vue from "./vue"
let app = new Vue(...);
app.$mount('#jg-app');
and import the esm.browser version
// server
app.use('/vue', express.static(__dirname + '/node_modules/vue/dist/vue.esm.browser.js'));
// template
script(src="/main.js" type="module")
Now Vue is working, however, dependencies like Vue-Router appear to not have this es.browser style file.
This is not a solution, it's a workaround
The below rollup config is not esm, it's just a way to create a bundle with dependencies included.
You get one minified browser-compatible JS file.
Here's my working example rollup.config.js (you should replace input: 'src/index.js' with your web app entry point and output.file with a location for the generated bundle):
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import builtins from 'rollup-plugin-node-builtins';
import babel from 'rollup-plugin-babel';
import visualizer from 'rollup-plugin-visualizer';
import { terser } from "rollup-plugin-terser";
const browserPlugins = [
resolve({browser: true}), // so Rollup can properly resolve cuid
babel({
exclude: 'node_modules/**',
babelrc: false,
presets: ['es2015-rollup'],
}),
// builtins(),
commonjs(),
visualizer(),
terser(),
]
export default [
// browser-friendly UMD build
{
// external: Object.keys(globals),
input: 'src/index.js',
output: {
name: 'thinflux',
file: './dist/browser/thinflux.min.js',
format: 'umd'
},
plugins: browserPlugins,
}
];
One more thing: express should statically serve the output.file path, not your source files
Trying to include the sax parser and running into difficulties [parser.ts].
import sax = require("sax");
export class MyParser {
//my parser code
}
When I try to use it [app.component.ts]:
import {MyParser} from './parser'
...
constructor(private http: Http, private parser: MyParser) {}
I get this error
Evaluating http://localhost:3000/sax
Which I know means SystemJS cannot find the module. Sax is installed in node_modules and listed in package.json. I've installed typings using
typings install --ambient sax
But getting lots of duplicate identifier warnings even though my tsconfig.json is excluding
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
Lastly, isaacs uses code like this in his examples
tag.parent
tag.children
This isn't supported by the typing (d.ts).
Does anyone have a working install of sax with TS and ng2?
The error you have is at runtime. So I think that you could try to configure SystemJS this way:
<script>
System.config({
paths: {
sax: './node_modules/sax/lib/sax.js'
}
})
</script>
This way you will be able to import Sax:
import {SAXParser} from 'sax';