In a tutorial I have seen this way to import a component:
export default {
name: 'Home',
components: {
'counter' :require('#/components/Counter.vue').default
What would be the default way to do it?
You have 2 way to import component the first local if this components will be used in only one or 2 page you can import it like this
<script>
import ButtonCounter from './ButtonCounter.vue'
export default { components: { ButtonCounter } }
</script>
If this components will be used by too much page you can import it globaly like this in the main.js
import MyComponent from './App.vue'
app.component('ButtonCounter', ButtonCounter)
Related
I am trying to use a plugin VueDraggableNext in a project that also used Vuetify. Both plugins have a <draggable> element.
If I use the 'Options' API with Vue, I can use the following method to define which version of <draggable> I want to use:
<script>
....
import { defineComponent } from 'vue'
import { VueDraggableNext } from 'vue-draggable-next'
export default defineComponent({
components: {
draggable: VueDraggableNext,
},
....
....
and it works. But I wish to use the Composition API (it's what I'm used to!) - what is the syntax for defineComponent() in this case? I have tried re-ordering the imports, but to no effect, the vuetify version of <draggable> is always used.
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import { VueDraggableNext } from'vue-draggable-next'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
import '../assets/main.css'
createApp(App).use(vuetify).use(VueDraggableNext).mount('#app')
and I have tried the following in my vue.js but get error 'components is not defined'.
<script setup>
import { reactive,components} from 'vue'
import { defineComponent } from 'vue'
import { VueDraggableNext } from'vue-draggable-next'
defineComponent(
components = {
draggable: VueDraggableNext }
)
....
....
I am developing an application in Express and Vue js
I'm getting this:
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=460a75c2' does not provide an export named 'Vue' (at main.js?t=1667997788986:1:9)
App.vue file :
import {Vue, createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import axios from 'axios'
import vueAxios from 'vue-axios'
Vue.use(axios, vueAxios)
createApp(App).mount('#app')
My main.js file is :
<script>
export default {
data(){
return{
dataResponse: [],
}
},
methods: {
async getDataResponse(){
const res = await axios.get(`${this.baseUrl}/catalog/home`)
console.log(response)
}
},
created(){
this.getDataResponse()
}
}
</script>
<template>
<h1>Welcome</h1>
</template>
You didn't write which version of Vue you are using, but based on the fact that you are using createApp it looks like you are using Vue 3.
In that case, the error is correct -- there is no export called Vue in the module vue. Vue 3 removed the default export, so you can't write import Vue from 'vue' anymore, and there is no export named Vue in the package, so import { Vue } from 'vue' is not valid either.
You're probably trying to follow an old tutorial about installing Vue plugins. In Vue 3, instead of writing Vue.use(plugin), you would write createApp().use(plugin) instead.
If your are using Vue 2.7 and 3.x, do you mind if try import { createApp } from 'vue', and then use createApp(App).use(axios).use(vueAxios).mount('#app')? It should be works because of import nature.
Another alternative:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import axios from 'axios'
import vueAxios from 'vue-axios'
const app = createApp(App)
app.use(axios)
app.use(vueAxios)
app.mount('#app')
I need to add Vuetify Data Table to my existing Vuejs project. So when we add vue add vuetify its installed globally. Please help me for that how doing it
Thanks
You can import the dataTable component alone.
You can do this in a vuetify.js file:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify, {
VDataTable,
} from 'vuetify/lib'
Vue.use(Vuetify, {
components: {
VDataTable,
},
})
const opts = {}
export default new Vuetify(opts)
and in your main.js import this file: import vuetify from #/src/plugins/vuetify.js
or you can import it in the component you need it:
<!-- Vue Component -->
<template>
<v-card>
<v-card-title>...</v-card-title>
<v-card-text>...</v-card-text>
</v-card>
</template>
<script>
import { VDataTable } from 'vuetify/lib'
export default {
components: {
VDataTable,
}
}
</script>
you can read more about this in vuetify docs
I want to use routing in my vue project, but don't register many components globally, I am having trouble here.
My project uses vue-cli and vue-router
My project idea is to register these subcomponents only in the parent component that uses the corresponding subcomponent, but I want to use routing to control the presentation of these components.
My code is as follows
Main.js
import Vue from "vue";
import App from "./App";
import VueRouter from 'vue-router'
import test from "./components/test.vue"
Vue.use(VueRouter)
Vue.config.productionTip = false;
const routes = [
{
path: '/test', component: test,
}
]
const router = new VueRouter({routes: routes});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
<main-layout>
<router-view></router-view>
</main-layout>
</div>
</template>
<script>
import MainLayout from "./components/MainLayout.vue"
import test from "./components/test.vue"
export default {
components: {
"main-layout": MainLayout,
"test": test
},
name : "app",
data(){
return {
collapsed: false,
}
},
}
</script>
Just like the code above, I have to register every component that needs to be managed by routing in main.js and app.vue. These are cumbersome and the code is not beautiful. Is there any way or plugin to solve this problem?
You can move all the routing code to a different folder (possibly named router).
Inside the folder you can have a file called index.js that builds the router and move individual routing components to different files.
Each router component should only return router information and not a router object.
You'll still need to import individual vue components, but they'll be scattered across multiple files. This should make things tidier.
In your main.js will need to import the router, something similar to this
import router from './router'
....
Vue.use({
router
})
This is a possible folder structure for your router:
This is part of router/index.js that shows how to use routes defined in other files
import Vue from 'vue'
import Router from 'vue-router'
import API from '#/api'
import DashboardRoutes from './dashboard'
import CustomerRoutes from './customer'
import MaintenanceRoutes from './maintenance'
import DashboardStudioRoutes from './studio'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/api',
name: 'Api',
component: Api
},
DashboardStudioRoutes,
DashboardRoutes,
CustomerRoutes,
MaintenanceRoutes,
{
path: '*',
name: '404',
component: NotFound
},
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
I have an application like
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './routes.es6';
Vue.use(VueRouter);
new Vue({
router,
}).$mount('#app');
routes.es6 contains my router module:
import VueRouter from 'vue-router';
import Index from './pages/index.vue';
const routes = [
{
path: '/',
name: 'index',
component: Index,
},
...
];
export default new VueRouter({
routes,
});
This works but has one major drawback. Let's assume my index component is defined as follows
<template>
...
</template>
<script>
require(...)
export default {
...
};
</script>
Now all require and import statements are evaluated once the components are imported in the routes.es6 file and they are injected in the main app even though they should be scoped to the specific route.
How to overcome this?
It is called - LAZY LOADING
It is explained well in Vue-Router docs.
https://router.vuejs.org/en/advanced/lazy-loading.html