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?
Related
I am using VUE 3 and vite for my project. I have installed vite-svg-loader and imported and included the svg file as below.
import ProgressPin1 from '../assets/svg/google.svg?components';
export default {
components: {
ProgressPin1
}
}
Afterwards, I tried using the SVG inside my file as below:
<template>
<ProgressPin1/>
</template>
However, I am still getting the following error in my console.
Failed to resolve component: ProgressPin1
If this is a native custom element, make sure to exclude it from component resolution via
Do advise! Thank you.
I'm trying to use useRoute in a vue 2.6 application but it's undefined:
import { useRoute } from 'vue-router'
console.log('useRoute is',useRoute)
My package.json:
"#vue/composition-api": "^1.0.0-rc.5",
"vue": "^2.6.12",
"vue-router": "^3.4.8",
I could not find anything in the documentation telling me this would not work.
I can see that current version is 4 but that depends on vue 3 I don't have that version and am afraid everything will break when I update. And there is no need for this dependency since I have composition api installed.
Just like most of vue's "documentation" the useRoute api doc seems to be missing since what version this function is available.
There is no useRouter in vue router only in vue router next I know both pages look like they are for vue-router and none of the next content would suggest it's not for vue-router but the url indicates it's for vue router next.
It's nice to be prepared for the future but currently vue 2 is still installed when doing a yarn add vue so it would be nice if the documentation had a header indicating this is about a completely different project that just happens to have the same name and logos.
I suspect looking at this question I'm sht out of luck trying to get vue-route parameters in the composition-api setup function.
Update
With provide/inject I can get route props from every component:
{
path: `/:country(${
Object.keys(config.countries).join('|')
})?/:locale(${
Object.keys(config.languages).join('|')
})?`,
props:true,//need to have this
component: Root,
My Root component has:
props: {
locale: String,//this is mandatory
},
setup(props) {
const loc=ref(props.locale);
watch(()=>props.locale,
(current)=>{
loc.value=current
}
)
provide('locale', loc);
},
In the child component(s):
setup(){
// locale is an observable
const locale = inject('locale')
},
I have some base components that I use them in most of the page of my project. So I don't want to import them in each page and prefer to define them global. Related to nuxtjs source if I add components:true to nuxt.config.js my goal will achieved; but it doesn't work for me. And Version in use of nuxtjs is 2.15.2.
By the way, I'll be appreciated of any solution or idea.
You can register the component globally, so it won't be needed to import it in each page. In Nuxt, best way to do that is to create a plugin file.
Create for example the file myPlugin.js in your plugins folder, and use the following:
import Vue from 'vue';
import myComponent from '../components/MyComponent.vue';
Vue.use(myComponent);
Finally, in your nuxt.config.js, add your plugin:
plugins: [
'~plugins/myPlugin'
]
This is the second example presented in the Nuxt plugin doc.
This is not a bug and is totally working as expected, just a change that happened recently. More details can be found on my answer down here: https://stackoverflow.com/a/66336654/8816585
// nuxt.config.js
export default {
components: [
{
path: '~/components', // will get any components nested in let's say /components/test too
pathPrefix: false,
},
]
}
I'd recommend this solution, since it's the official way of doing.
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.
I'm using bootstrap-vue and I've noticed b-tabs renders differently depending on the Vue build that I import:
If I import vue it renders correctly:
https://codesandbox.io/s/vue-template-77mzg
But if I import vue/dist/vue.common or vue/dist/vue It renders wrongly:
https://codesandbox.io/s/vue-template-y0t15
Also, it doesn't happen with other components, like b-navbar-nav. They render correctly regardless of the vue build I import.
I'd like to understand why does it happen, since I need to import a vue version that includes the compiler because some components need it.
Thanks!
When importing a specific variant of Vue (i.e. commonjs vs ES), you need to set up an alias in webpack to ensure that BootstrapVue (and other dependants such as PortalVue) use the same build of Vue (as BootstrapVue also imports from vue).
See the docs on setting up aliases (so you can just import Vue from 'vue'):
https://bootstrap-vue.js.org/docs#aliasing-vue-import
i.e. for Webpack config
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}