I have lots of Vue components. I want to set up routing for them from the main.js file. But I'm unable to import my component here as it is a javascript file. How can I import my Vue component(.vue) here?
import Vue from 'vue'
import App from './App.vue'
// Components importing
import LandingPage './components/LandingPage.vue'; // error occurs here
const routes = [
{ path: '/', component: LandingPage },
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
Try to import like
import { LandingPage } './components/LandingPage.vue'
Or make export default to LandingPage component.
Related
I am trying to access the router in the interceptor of axios, but when I import the file in a .js Axios file, an error Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <template> occurs.
Here is a sample of the router.js file:
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = {
base: process.env.BASE_URL,
routes: [
{
path: "/settings",
name: "settings",
component: require('#/views/Settings.vue'),
}
]
};
export default new Router(router);
And the interceptor file contains:
import router from './router';
Why do you using require('#/views/Settings.vue')?
Instead try to use import function.
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = {
base: process.env.BASE_URL,
routes: [
{
path: '/settings',
name: 'settings',
component: () => import('#/views/Settings.vue'),
},
],
};
export default new Router(router);
PS: Answer your comment.
In main.js file export the instance variable:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
let vm = new Vue({
router,
render: h => h(App),
}).$mount('#app');
export default vm; // ATENTION HERE
In axios.js file import the main.js and access the $router:
import vm from './main.js';
...
// YOUR INTERCEPTOR
vm.$router.push({ name: 'settings' });
...
I need help pre-rendering my site. So at first, I had a fully functional site. I wanted to add pre-render-spa plugin to the server. but everything got ruined. I needed to update the Vuetify framework too. and that messed it all up. Got a lot of errors but managed to deploy the server but when I do I get this "Vuetify is not properly initialized," so I need help initialized the new Vuetify into my CLI 3 vue.
My Main.js File.
Main.js
import Vue from "vue";
import './plugins/vuetify'
import App from "./App.vue";
import router from "./router";
import store from "./store";
import './assets/style.css';
var VueScrollTo = require('vue-scrollto');
import VueAnalytics from "vue-analytics";
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
attempt: 1,
observer: true,
})
Vue.use(VueScrollTo)
Vue.config.productionTip = false;
Vue.use(VueAnalytics, {
id: "UA-89031274-11",
autoTracking: {
screenview: true
}
});
new Vue({
router,
store,
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
render: function (h) {
return h(App);
},
}).$mount("#app");
vue.config.js
const path = require("path");
const PrerenderSPAPlugin = require("prerender-spa-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports.plugins.push = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
inject: false
}),
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, './dist'),
routes: ["/"]
}),
new VuetifyLoaderPlugin()
]
}
};
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/styles/main.sass'
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi'
},
})
So this is all the file that come to relate with the pre-rendering and vuetify. I tried to reinstall vuetify and vue-cli and npm install nothing has fixed the problem that vuetify is not loading.
I saw that vuetify updated their installing documents and they said to include vuetify before the $mount("#app");
in this case the build just keep going forever and doesn't stop.
new Vue({
router,
store,
vuetify,
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
render: function (h) {
return h(App);
},
}).$mount("#app");
Greatful for the help.
In main.js changed
import './plugins/vuetify'
to
import vuetify from './plugins/vuetify'**
and then add it into new Vue instance like this:
new Vue({
...
vuetify,
...
}).$mount('#app')
for example, main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
and vuetify.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)
export default new Vuetify({
iconfont: 'md',
theme: {
primary: colors.green.darken1,
secondary: colors.green.lighten4,
accent: colors.green.darken3
}
})
I am trying to integrate vue-router in my app. In my admin.js, I have:
import Vue from 'vue'
import Router from 'vue-router'
import AdminHome from '../admin/home.vue'
import AdminMetroArea from '../admin/metro-area.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/metro-areas/', name: 'metro-areas', component: AdminMetroArea },
{ path: '/', component: AdminHome }
]
})
document.addEventListener('DOMContentLoaded', () => {
const admin_home = new Vue(AdminHome).$mount('#vue-admin-home');
})
and I call like:
<td>my metro: <router-link :to="{ name: 'metro-areas' }">{{metro_area.metro_area}}</router-link></td>
but I get the following error:
How do I configure my Vue app to pick up my router?
the Router needs to be supplied to Vue during initialization, explicitly:
new Vue({
router: Router
})
Where Router is your import Router from '...path'.
In Main.js file do the following thing:
import router from './router'
where './router' would be the path of your router file.
then,
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
data() {
return {}
}
})
Than, supply it to the Vue in the same file (Main.js). HAPPY CODING :)
my main.js looks like:
import Vue from 'vue'
import VueRouter from './router'
import routes from './router/index.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
Im trying to remove the hashtag from the url...
Im using Webpack for the development and as you can see im importing the routes file.
I'm seeing this error everytime
"Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1router__.a is not a
constructor"
Does anybody have a good doc for router?
this is the /router/index.js file
import Vue from 'vue'
import VueRouter from 'vue-router'
import Settings from '#/components/Settings'
import Login from '#/components/Login'
Vue.use(VueRouter)
export default new VueRouter({
routes: [{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Settings',
name: 'Settings',
component: Settings
}
]
})
the import statement of the VueRouter should be
import VueRouter from 'vue-router'
EDIT
You are setting up the VueRouter in ./router/index.js file itsels , so add the mode:'history' property there itself
./router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Settings from '#/components/Settings'
import Login from '#/components/Login'
Vue.use(VueRouter)
export const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Settings',
name: 'Settings',
component: Settings
}
]
})
main.js
import Vue from 'vue'
import {router} from './router/index.js'
new Vue({
el: '#app',
router,
render: h => h(App)
})
Vue component can not get this.$router, but get this.$route in App component, what could be wrong?
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import store from './store'
import FeedView from './views/FeedView.vue'
import LoginView from './views/LoginView.vue'
Vue.use(VueRouter)
Vue.config.devtools = true
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: FeedView },
{ path: '/login', component: LoginView },
]
})
new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
capture image of vue-devtools
It is clearly explained in vue-router docs: https://router.vuejs.org/en/api/route-object.html
The route object can be found in multiple places:
Inside components as this.$route
Inside $route watcher callbacks
As the return value of calling router.match(location)
If you want to use e.g. router.push(), based on your code, you definitely should be able to use this.$router.push()