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')
},
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 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 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'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'
}
}
}
BugSnag provides a very useful and initially free product for tracking errors in your vue app. The problem is that there is no documentation for using this in a nuxt app. A plugin would be the best place to utilize it in the app.
Trying to resolve this was killing me for a while but I was able to find help from Patryk Padus from the comments on this post.
For anyone trying to make this happen, do the following:
1.Place the following code inside of a plugin located in the /plugins folder of your application root:
#/plugins/bugsnag.js
import Vue from 'vue'
import bugsnag from '#bugsnag/js'
import bugsnagVue from '#bugsnag/plugin-vue'
const bugsnagClient = bugsnag({
apiKey: 'YOUR-KEY',
notifyReleaseStages: [ 'production', 'staging' ]
})
bugsnagClient.use(bugsnagVue, Vue);
export default (ctx, inject) => {
inject('bugsnag', bugsnagClient)
}
2.Inside of the nuxt.config add the following to your plugins section:
plugins: [
'#/plugins/bugsnag.js',
],
3.Inside of your vue layout reference the bugsnag object using the $bugsnag object:
this.$bugsnag.notify(new Error('Nuxt Test error'))
If you're reading this in January 2021 and using Nuxt v2.x.x and above, the above answer might not work for you.
Here's what I did instead:
import Vue from 'vue'
import bugsnag from '#bugsnag/js'
import BugsnagVue from '#bugsnag/plugin-vue'
const bugsnagClient = bugsnag.start({
apiKey: process.env.BUGSNAG_KEY,
plugins: [new BugsnagVue()], // this is important
})
Vue.use(bugsnagClient) // // this is also important
export default (ctx, inject) => {
inject('bugsnag', bugsnagClient)
}
Tip: Install the #nuxt/dotenv module to be able to use process.env in your plugin.
References:
Bugsnag Vue installation reference