I am working on a nuxt project, and I'm trying to build a map component using google maps and the plugin https://www.npmjs.com/package/vue2-google-maps. I have installed the plugin using npm
In my index.html page I have a normally working page that looks like:
<template>
<div>
<br>
<br>
<Card/>
<br>
<br>
<br>
<br>
<!-- <Googlemap/> -->
<Panel/>
<Four/>
</div>
</template>
<script>
import Panel from '~/components/panel.vue'
import Card from '~/components/detailCard.vue'
// import GoogleMap from '~/components/googleMap.vue'
export default {
components: {
Panel,
Card,
// GoogleMap
}
}
</script>
When I Uncomment the 3 lines with Googlemap in them I get the error in the screenshot .
The Googlemap component is:
<template>
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
#click="center=m.position"
/>
</GmapMap>
</template>
<script>
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
load: {
key: "MYTOKEN",
libraries: "places"
}
});
export default {
}
</script>
<style>
</style>
What am I doing wrong?
edit:
Most likely you are missed transpile
https://github.com/xkjyeah/vue-google-maps/blob/0985d475496083f2459db2960ba8f9317aab50ef/README.md#nuxtjs-config
transpile: [/^vue2-google-maps($|\/)/]
Often it refers to the response from a request, where it was expecting a JSON object, but instead is returned HTML. The < refers to the first character in <!DOCTYPE... or similar.
Check the responses coming back from the APIs or other services you’re using.
Updating from Node 12x to Node 14x worked for me
Related
Haven't touched Vue in a while, now I'm building a <HeroImage> component in Vue and Vuetify which takes an src attributes, put the image, and combine it a certain way with the slot and other props.
Usually, the answer is wrapping the src string in a request(). But now it throws this message at compile time:
Critical dependency: the request of a dependency is an expression
Here's what I'm trying to do:
<!--
src/views/Home.vue
-->
<template>
<!-- This does not work -->
<HeroImage src="#/assets/hero-image.png" />
<!-- As comparison, this somehow works -->
<img :src="require('#/assets/hero-image.png')" />
</template>
<script>
import HeroImage from "#/components/HeroImage"
export default {
components: { HeroImage }
}
</script>
<!--
src/components/HeroImage.vue
-->
<template>
<img alt="Hero Image" class="align-center justify-center" :src="require(src)" />
</template>
<script>
export default {
name: "HeroImage",
props: {
src: String
}
}
</script>
No errors in browser, Webpack compiles successfully, but the "hello from dashboard" doesn't show up in the page.
I'm using Vue v2.6
main.js
import Vue from 'vue'
Vue.component('dashboard', require('#comp/dashboard.vue').default);
const app = require('#/App.vue').default; // this app component works fine
import "./css/app.css"
new Vue({
render: h => h(app) // this app component works fine
}).$mount('#app')
dashboard.vue
<template>
<div>
Hello from dashboard
</div>
</template>
<script>
export default {
name: "dashboard"
}
</script>
index.html
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>
This is the rendered HTML from the browser, However, "hello from dashboard" is not there :(
<body>
<div id="app">
<dashboard></dashboard>
</div>
</body>
You have the root file "App.vue" mounted in the div id = "app", so the "dashboard" needs to be added to App.vue to see its contents.
// App.vue
<template>
<dashboard />
</template>
<script>
export default {};
</script>
<style scoped></style>
In this code, you have connected a component globally, which will be available in App.vue or another child component
Vue.component('dashboard', require('#comp/dashboard.vue').default);
I assume its the path you are missing so i added a / before comp. Because you stated the App.vue works.
Vue.component('dashboard', require('#/comp/dashboard.vue').default);
Recently I've been studying React. I'm facing some issues in my code and don't know the reason.
I'm trying to load a local image in my webpage with the following code:
import React from 'react'
import './style.css'
import Card from '../UI/Card'
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={require('../../blogPostImages/img1.jpg')} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
However, when I access the webpage there is no image. When I check the elements of the page I find the following code:
Somehow, it looks like the image is not being loaded to the page. I have checked many questions in the forum, but none of them seems to explain this problem.
I also tried to reinstall few modules as webpack and other dependencies, but the problem still persists. The tree of files of my project are as following:
Thank you for the support!
Try importing the image as
import postImage from "../../blogPostImages/img1.jpg";
Modified code
import React from 'react'
import './style.css'
import Card from '../UI/Card'
import postImage from "../../blogPostImages/img1.jpg"
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={postImage} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
import Img1 from '../../blogPostImages/img1.jpg';
<img src={Img1}/>
I am trying to use the parallax within a react component. I have gotten this to work in the past. This is a MeteorJs project as well
I get a console error:
$(...).parallax is not a function
My component:
import React from 'react';
import $ from 'jquery';
export default class Index extends React.Component{
render(){
$(document).ready(function(){
$('.parallax').parallax();
});
return(
<div className="container">
<div className="parallax-container">
<div className="parallax"><img src="images/parallax1.jpg"/></div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background
content or image in this case, is moved at a different speed than the foreground content while
scrolling.</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src="images/parallax2.jpg"/></div>
</div>
</div>
)
}
}
My client main.js file:
import '../imports/startup/client/routes';
import '../node_modules/materialize-css/dist/js/materialize.min';
import '../node_modules/materialize-css/js/parallax';
The error message is telling you that .parallax() isn't a function in this line of code:
``
$('.parallax').parallax();
```
Which means that $('.parallax') is returning an object (usually a html element). It is not surprising that .parallax() is not a function, because it's just a html element.
Looking at the documentation, I think you are missing this initialisation code:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.parallax');
var instances = M.Parallax.init(elems, options); });
Is there a possibility with Aurelia to load a view with his viewmodel dynamically?
For example I have a list of modules, I click one of them and the target view will be loaded in the page. The list is not known a priori, so I can't load all modules.
model example.js
export class Modules{
list = [];
constructor(socket) {
socket.on('update', list => this.list);
}
select(module) {
//load and display the module view
}
}
view example.html
<template>
<ul>
<li repeat.for="module of list" click.delegate="$parent.select(module)">${module.name}</li>
</ul>
<div class="target">
<!-- Here should be loaded the module -->
</div>
</template>
Approach 1
Load the data in your app.js class's configureRouter method. Once the data is loaded you can configure the router. Just be sure to return a promise from configureRouter.
Approach 2
Use Aurelia's <compose> element to compose the selected module with the appropriate view.
Here's a working plunk
And the code:
app.js
import {inject} from 'aurelia-framework';
import {MockSocket} from './mock-socket';
#inject(MockSocket)
export class App {
list;
selectedModule;
constructor(socket) {
socket.on('update', list => this.list = list);
}
select(module) {
this.selectedModule = module;
}
}
app.html
<template>
<ul>
<li repeat.for="module of list">
<button type="button" click.delegate="$parent.select(module)">${module.path}</button>
</li>
</ul>
<div class="target">
<compose view-model.bind="selectedModule.path"></compose>
</div>
</template>