I am trying to render a Leaflet map using Vue2Leaflet in a jsfiddle so I can get help with a specific problem but I can't even get it to render properly in the trivial case. I have already looked up how to load libraries via CDN in jsfiddle and a far as I can tell, I am doing it right. There are also no errors in the console. But the map will not render.
This is the jsfiddle: https://jsfiddle.net/iboates/bywzgf1q/3/
Vue2Leaflet also requires the vue-client-only library. I have it working in my local codebase but maybe it has something to do with why it isn't working in jsfiddle. I am also loading this library via a CDN.
I've also looked at other jsfiddles using Vue with custom libraries loaded via CDN and I don't see what is being done differently.
Apparently StackOverflow requires that a jsfiddle link requires code in the post as well, which is a bit weird to me since the code is literally contained in a link which can also execute it, but here it goes:
HTML:
<div id="app">
<client-only>
<l-map id="map" ref="map">
<l-tile-layer
:attribution="'x'"
:url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'"
/>
<!-- <l-geo-json
:geojson="geojsonData"
/> -->
</l-map>
</client-only>
</div>
JS:
import { LMap, LTileLayer } from "./vue2-leaflet";
new Vue({
el: "#app",
components: {
LMap,
LTileLayer,
ClientOnly
},
data: {
geojsonData: {
type: "FeatureCollection",
features: []
}
},
mounted() {
}
})
CSS
#app {
background-color: black;
height: 500px;
width: 500px;
}
#map {
height: 500px;
width: 500px;
}
There are multiple errors in your fiddle.
First of all, Vue is not installed. In addition, you try to import Vue-Leaflet like in a Webpack / Rollup build system and not the way you can use it from a CDN.
To begin with, install your CDN (Vue, Leaflet CSS, Leaflet js, Vue-Leaflet):
https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js
https://unpkg.com/leaflet#1.7.1/dist/leaflet.css
https://unpkg.com/leaflet#1.7.1/dist/leaflet.js
https://unpkg.com/vue2-leaflet#2.6.0/dist/vue2-leaflet.min.js
Then, add your components the CDN-way (check official documentation: https://vue2-leaflet.netlify.app/quickstart/#if-imported-by-cdn
):
components: {
'l-map': window.Vue2Leaflet.LMap,
'l-tile-layer': window.Vue2Leaflet.LTileLayer
}
Check working fiddle: https://jsfiddle.net/scpta4jq/1/
Related
I have the following code:
blah-foo.vue:
<template>
<div>Hello {{ name }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
name: {
type: String,
}
},
});
</script>
<style scoped>
div {
color: white;
}
</style>
and App.vue:
<template>
<blah-foo
name="Alice"
></blah-foo>
<blah-foo
name="Bob"
></blah-foo>
</template>
The result in my browser is the following:
<div data-v-73bdd40c>Hello Alice</div>
<div data-v-73bdd40c>Hello Bob</div>
Is there any way I could tell the vue loader to generate an unique data-v-* attribute for each of them ?
What is happening in production is that since the component blah-foo is called on many different lazy-loaded pages, I end up having many times
div[data-v-73bdd40c] {
color: white;
}
all overriding each other.
That isn't a problem in itself, it just does seem very disgraceful (code wise) after having loaded a few pages when inspecting elements.
That is not possible with vue-loader. And it shouldn't be done anyway.
The whole point of the data-v-xxx attribute is to identify the components in the DOM so vue can apply to them the correct scoped css.
If it ever applied uniq data-v attributes, it would not be able to apply the correct css.
I understand your problem is that, on production, you see in the css inspector several times the css code, right?
My guess is that it's related with sourcemaps, which may mess with the css inspector. But I can't help more without additional details on your project configurations.
Even if your component is used on several pages, its module will be fetched and loaded only once. You don't have the scoped css loaded several times, it's just an inspector problem.
I have a lot of SVGs in my site and they have lots of paths so I don't want to clutter my code with them, but display the full code in the browser.
In PHP there's a magic function called file_get_contents('path')
Is there an alternative to this in Nuxt? So far the only option is to serve it as a regular img tag which prohibits all styling.
Check out the #nuxtjs/svg module (NPM). Using that module you can import your svgs in your script and use them like components in your template.
<template>
<NuxtLogo class="logo" />
</template>
<script>
import NuxtLogo from "~/assets/nuxt.svg?inline";
export default {
components: { NuxtLogo },
};
</script>
<style scoped>
.logo {
fill: #fff;
}
</style>
I am using materialdesignicons in my vue project.
require ('../node_modules/#mdi/font/css/materialdesignicons.min.css);
Vue.use(Vuetify, {iconfont:'mdi'});
I have a handful of icons which I dynamically create:
<v-icon>{{ some-mdi-file }}</v-icon>
When I build for production via (npm run build) I get the following error:
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
img/materialdesignicons-webfont.someHash.svg (3.77 MiB)
That file size is huge because it includes every icon, regardless of whether it's being used. Is there a way to trim that file size down by only packaging the specific icons used. Is there a different package I should be using? Caveat: The project is hosted offline, so I need to include the fonts directly in my project.
I looked at vue-material-design-icons but it looks like it may not work for dynamic icon names and it says nothing about the overall file size/performance.
I have also looked here but clicking on the 'size warning' link brings me to a page where the Vue portion is not filled out
https://dev.materialdesignicons.com/getting-started/webfont
I would recommend using the #mdi/js package for this which provides SVG paths for each icon and supports tree shaking. Currently Vuetify doesn't support SVG icons but it should in the future.
For now, it's easy enough to create a custom icon component:
<template>
<svg :class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path :d="path" />
</svg>
</template>
<script>
export default {
name: 'my-icon',
data: () => ({
path: '',
}),
methods: {
updatePath() {
if (!this.$scopedSlots) return
if (typeof this.$scopedSlots.default !== 'function') return
this.path = this.$scopedSlots
.default()
.map((n) => n.text)
.join('')
},
},
mounted() {
this.updatePath()
},
updated() {
this.updatePath()
},
}
</script>
<style scoped>
.icon {
display: block;
color: inherit;
fill: currentColor;
width: 24px;
height: 24px;
}
<style>
Then to use it you just need to import your component and the icon you want to use:
<template>
<div class="app">
<my-icon>{{mdiCheck}}</my-icon>
</div>
</template>
<script>
import MyIcon from 'path/to/my/icon.vue'
import { mdiCheck } from '#mdi/js'
export default {
name: 'my-app',
components: {
MyIcon,
}
data: () => ({
mdiCheck,
}),
}
</script>
After upgrading to Nuxt.js 2, I noticed that about 30 CSS files are loaded when the homepage loads. I actually noticed it when I checked Google Pagespeed Insights and saw about 30 "blocking CSS resources".
Is there any setting for lazy loading them or something like that?
Nuxt2 has the code splitting and you can use the every css files in the current page only so you have 2 way for bundling css, first is the common css in the all project and second is an isolate css file for each page. use the scoped attribute in the style tag.
for example:
//////// sample.vue//////
<template>
write somethin.....
</template>
<script>
write som,ething.....
</script>
<style lang="scss" scoped>
body {
background-color: gray;
color: #9e9e9e;
}
</style>
export default {
build: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}
https://github.com/nuxt/nuxt.js/issues/3166#issuecomment-423832425
I am trying to build a single page application using Vue.js 2.0. The application is supposed to feature multiple modes of operation, which I wanted to implement using Vue.js dynamic component. Since the state of each mode should be preserved while switching between them, I decided to use the keep-alive feature that Vue.js provides. One of the modes is supposed to be a network view created by using Cytoscape.js .
And here comes my problem. The network is initialized correctly when I switch the first time to it, but after switching back and forth, the network view freezes. keep-alive works properly (as far as I understand it) and brings back both the Cytoscape instance and the proper HTML section. Somehow, the connection between the Cytoscape instance and the HTML sections seems to be lost, although I don't understand how and why.
Here is an example code.
//sample data for network
var testElements = [
{ data: {id: 'a'} },
{ data: {id: 'b'} },
{ data: {
id: 'ab',
source: 'a',
target: 'b'
}
}
];
//Vue components
Vue.component('otherView', {
template: '<div>This is another mode</div>'
});
Vue.component('network', {
template: '<div id="container" class="cy"></div>',
mounted: function () {
cy1 = cytoscape({
container: document.getElementById("container"),
elements: testElements
});
}
});
//Vue dynamic component
var vm = new Vue({
el: "#dynamic",
data: {
currentView: 'otherView'
}
});
.cy {
width: 500px;
height: 500px;
position: absolute;
top: 100px;
left: 10px;
}
<script src="https://rawgit.com/cytoscape/cytoscape.js/master/dist/cytoscape.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="dynamic" >
<div id="selectorButton">
<button id="button1" #click="currentView='otherView'">Other view</button>
<button id="button2" #click="currentView='network'">Network</button>
</div>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</div>
If you remove a Cytoscape instance, you've destroyed it. Either make sure that Vue doesn't destroy your DOM elements or create a new Cytoscape instance each time from JSON: http://js.cytoscape.org/#cy.json
I could not understand your problem completely , but you can try shifting code you have written in network component's mounted oroperty to activated property as follows
Vue.component('network', {
template: '<div id="container" class="cy"></div>',
activated: function () {
if(initial state){
cy1 = cytoscape({
container: document.getElementById("container"),
elements: testElements
});
}
}
});
This may help because when a cmponent is kept-alive the mounted hook is called only once when first time enter you the component, its not called again on subsequent entering whereas activated hook is called everytime you enter the component when kept-alive