I am searching in the documentation but i not find any examples for using the maps modules with zingchart-vue
Really I am using Nuxt, but i supose that its same...
we have updated our readme in the zingchart-vue repo on how to address the problem.
https://github.com/zingchart/zingchart-vue#zingchart-modules
ZingChart comes bundled with your common chart types such as line, column, pie, and scatter. For additional chart types, you will need to import the additional module file.
For example, adding a depth chart to your vue component will require an additional import. Note, you must import from the modules-es6 directory in the zingchart package.
import 'zingchart/modules-es6/zingchart-depth.min.js';
Here is a full .vue example for loading a map:
<template>
<div style="height:200px">
<zingchart :height="'100%'" ref="myChart"
:data="{
shapes: [
{
type: 'zingchart.maps',
options: {
name: 'usa',
ignore: ['AK','HI']
}
}
]
}" >
</zingchart>
</div>
</template>
<script>
import zingchartVue from 'zingchart-vue';
import 'zingchart/modules-es6/zingchart-maps.min.js';
import 'zingchart/modules-es6/zingchart-maps-usa.min.js';
export default {
components: {
zingchart: zingchartVue,
},
}
</script>
Related
I'm trying to add Vue.Draggable to my app. The documentation provides a direct link to the javascript files which I import, but I get the error:
The requested module 'vuedraggable' does not provide an export named 'default'
(the listed source returns a 404, but using unpkg I can get the right file from a different source)
Which I recognize as well... not specifying a default. Which implies I need to import a named package. But I can't for the life of me figure out how to get it to work with VueDraggable.
Here's how I import vue & vuedraggable:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue#3/dist/vue.esm-browser.js",
"vuedraggable": "https://unpkg.com/vuedraggable#4.1.0/dist/vuedraggable.umd.min.js"
}
}
</script>
how I import vuedraggable to the app;
import draggable from "vuedraggable";
and hook it to vue;
components: {
draggable
},
This question is very similar, but I don't understand how to do it without build tools.
What am I missing?
I'm migrating over to NuxtJS 3, but my project has several levels of component folders:
/components
/foo
file.vue
file2.vue
/fooTwo
anotherfile.vue
/bar
file1.vue
file10.vue
etc...
Because of Nuxt's naming convention, if I try to import the anotherfile component I'd have to rename every place it's used inside my codebase to this: <FooFooTwoanotherfile/>
Because their documentation states:
the component's name will be based on its own path directory and filename
I really don't want to go through and rename every place that the component is being used. And I also would prefer to not flatten my directory structure either. So, is there some config option in Nuxt 3 that overrides this and lets me just globally call the components by their original name?
My answer here is still relevant for Nuxt3
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
components: [
{
path: '~/components', // will get any components nested in let's say /components/nested
pathPrefix: false,
},
]
})
And will allow you to auto-import components without the need to specify a nested path for the components.
/pages/index.vue
<template>
<div>
<yolo-swag /> <!-- no need for <nested-yolo-swag /> here -->
</div>
</template>
With the following file structure
As #kissu suggested this is the answer:
nuxt.config.ts
components: [
{
path: '~/components', // will get any components nested in let's say /components/test too
pathPrefix: false, //<------------------- here
},
]
I want to change this Vue Material prefix tags "md-":
<md-button>{{title1}}</md-button>
to:
<custom-button>{{title1}}</custom-button>
After looking at the vue-material source code, All the components specify the 'name' attribute manually. You can see an example of that in the code for MdAutocomplete.
You could change the name: 'MdAutocomplete', to name: 'CustomAutocomplete', for each of the files.
There's also a bit of a messier approach that you could take using Vue's async components system. After doing the normal vue-material setup process:
import Vue from 'vue'
import VueMaterial from 'vue-material'
Vue.use(VueMaterial)
You can specify custom component aliases like so:
import Vue from "vue"
export default {
components: {
CustomButton: () => Promise.resolve(Vue.component('MdButton'))
},
// ...
}
I try to import this package into my nuxt project.
All my coding experiments can be found here. I will refer to different branches.
There are several ways to do so:
Just import it right in the page like here (master branch)
This way worked well. You can go to the uploading page via a button on a home page.
Until you manually refresh the page
Then you will get this error SyntaxError Cannot use import statement outside a module
The same error happens when you try to build it.
Import it via plugins (like in plugin-use branch with or without vendor option in build)
I've got the same error.
Import it via plugins with some options (like in plugin-options branch)
Then the package loads only when you refresh the page and only in dev mode.
If you will go to that button on a home page (referenced before) - there will be an empty page.
Import it through modules (like in modules branch).
Then the nuxt cannot load at all, this error happens SyntaxError: Invalid or unexpected token
Could you comment on each method and why it doesn't work?
How to import it correctly?
The final answer is following (I've looked up the projects which use this package).
There was a project which run on Nuxt.
These are changes which you should add to #tamzid-oronno 's answer
//vue-upload-multiple-image.js
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import VueUploadMultipleImage from 'vue-upload-multiple-image'
Vue.use(VueLazyload) // this is from the package installation guide
Vue.component('VueUploadMultipleImage', VueUploadMultipleImage)
And list it in plugins the same way.
//nuxt.config.js
plugins: [
{ src: '~plugins/vue-upload-multiple-image', ssr: false }
]
Thus you will be able to use the package without importing it in pages as tags. This was implemented in plugin_plus_lazy branch.
Both tags will work vue-upload-multiple-image and VueUploadMultipleImage.
//your-index-file.vue
<template>
<div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
<vue-upload-multiple-image
#upload-success="uploadImageSuccess"
#before-remove="beforeRemove"
#edit-image="editImage"
:data-images="images"
idUpload="myIdUpload"
editUpload="myIdEdit"
dragText = "Drag an image here"
browseText = "(or click here to browse)"
primaryText = "Default Image"
markIsPrimaryText = "Set as default image"
popupText = "This image will be set as default"
dropText = "Drag and drop"
accept = image/jpeg,image/png,image/jpg,image/tif,image/tiff
></vue-upload-multiple-image>
</div>
</template>
<script>
export default {
name: "AppUpload",
data(){
return{
file:"",
images: []
}
},
methods:{
uploadImageSuccess(formData, index, fileList) { },
beforeRemove (index, done, fileList) { },
editImage (formData, index, fileList) { },
}
}
</script>
<style scoped>
</style>
To create a static version and test it on your local machine do the following:
$ npm run generate
# test the project
$ npm install http-server
$ cd dist
$ http-server -p 3000
I still have a question - why does it work? :)
Use it as plugin.
In the plugins folder, make a file named vue-upload-multiple-image.js
//vue-upload-multiple-image.js
import Vue from 'vue'
import {VueUploadMultiple} from 'vue-upload-multiple-image'
Vue.use(VueUploadMultiple)
List it under plugins block on nuxt.config.js
//nuxt.config.js
plugins: [
{ src: '~plugins/vue-upload-multiple-image', ssr: false }
]
Thus you will be able to use the package on any component of your project
I would like to use the icons from Octicon, my project is written in nuxt.js, so I decided to use this Octicon Component for Vue.js.
I created a file called octicon.js and added it to /plugins and registered it in nuxt.config.js. When I start my app, I get the message "unexpected identifier".
/plugins/octicion.js :
import Vue from 'vue'
import octicon from 'vue-octicon/components/Octicon.vue'
// Pick one way betweem the 2 following ways
// only import the icons you use to reduce bundle size
import 'vue-octicon/icons/repo'
// or import all icons if you don't care about bundle size
import 'vue-octicon/icons'
Vue.use(octicon);
In MyComponent.vue I use it like
<template>
<div>
<octicon name="repo-forked" label="Forked Repository"></octicon>
</div>
</template>
nuxt.config.js looks like
plugins: [
"#/plugins/bootstrap-vue",
"#/plugins/octicon.js"
],
My Browser shows me:
Where is my error?
Two things you probably need to do. The plugin is only required on the client side so you should specify this in nuxt.config.js:
plugins: [
"#/plugins/bootstrap-vue",
{ src: '~/plugins/octicon.js', mode: 'client' }
]
Secondly you may need to add it to the transpile build option, also in nuxt config.js:
build: {
transpile: ['octicon.js']
}
You may also want to wrap the <octicon> tag in a <no-ssr> tag.