Learning vuejs3 I created new #vue/cli app with command
vue create myapp
with vuejs 3 selected
I added Router to my project and added Router reference in my src/main.js :
import { createApp } from 'vue'
import { createRouter/*, createWebHistory */ } from 'vue-router'
import WelcomeScreen from './pages/WelcomeScreen.vue'
import UsersList from './pages/UsersList.vue'
import App from './App.vue'
const router = createRouter({
// history: createWebHistory(),
mode: 'history',
routes: [
{ path: '/', component: WelcomeScreen },
{ path: '/users', component: UsersList }
]
})
const app = createApp(App)
app.use(router)
app.mount('#app')
But In the console I see warning :
"export 'createRouter' was not found in 'vue-router'
and error :
main.js?56d7:10 Uncaught TypeError: Object(...) is not a function
In my package.json I have :
"dependencies": {
"core-js": "^3.6.5",
"mitt": "^2.1.0",
"vue": "^3.0.0",
"vue-router": "^3.4.8"
},
and
$ vue --version
#vue/cli 4.5.8
Which way is valid?
Also are some some vuejs3 tutorials for #vue/cli?
I found some vuejs 3 tutorials, but not for #vue/cli and that raise some confusion...
Say in my #vue/cli with vue2 I use file src/router/index.js, but I do not remember if
I have created manually...
Thanks!
You need install vue-router like this for vue3:
npm install vue-router#next --save
Router.js
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from "vue-router"
const routeInfos = [
{
path : "/",
component : HomePage
},
{
path : "/favorites",
component : FavoritesPage
}
]
const router = createRouter({
history : createWebHistory(),
routes : routeInfos
})
export default router;
import In Main.js
import router from "./router"
createApp(App).use(router).mount('#app')
I had the same problem and found the answer here
// uninstall vue2.x vue-router
npm uninstall vue-router --save
// install vue3 vue-router
npm install vue-router#next --save
Related
Trying to import some routes for a Vue3, VueRouter instance in Laravel9, Vite only receive the above error. Here's my config:-
package.json
"dependencies": {
"vue": "^3.2.45",
"vue-router": "^4.1.6",
"vuex": "^4.1.0"
}
resources/js/routes.js
module.exports = [
{
path: '/',
name: 'posts.index',
component: () => import('./routes/Posts/Index.vue')
},
{
path: '/post/:slug',
name: 'posts.show',
component: () => import('./routes/Posts/Show.vue')
}
]
resources/js/app.js
import './bootstrap';
import * as Vue from 'vue';
import * as VueRouter from 'vue-router';
import * as Vuex from 'vuex';
import * as routes from './routes';
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: routes
// routes: import('./routes.js')
})
help
I am getting a blank white screen when running "npm run serve" .In the browser console it says that
I am using ,Vue3 , Vuetifiy , Vuex4 and vue-router.
Here is my index.js file for vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
And my github repo link : https://github.com/mertpinarbasi/vue-to-do
I'm using a js framework known as griptape(used for blockchain). I'm getting this error when trying to use the vue router.
import Vue from "vue"; //Error **does not provide an export named 'default'**
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = new VueRouter({
routes,
});
export default router;
while my vue.d.ts file looks like this
import { CompilerOptions } from '#vue/compiler-dom';
import { RenderFunction } from '#vue/runtime-dom';
export declare function compile(template: string | HTMLElement, options?: CompilerOptions): RenderFunction;
export * from "#vue/runtime-dom";
export { }
router.d.ts file look like this
I think you are using Vue 3. You should check your vue-router version. If you just run npm i vue-router now, the version should be "^3.5.3". Try to use npm i vue-router#next to install newer version.
Then export router like this:
import {createRouter, createWebHistory} from 'vue-router'
const routes = [
{
path:'/',
name:"Home",
component:()=>import('./pages/Home.vue')
}
,
{
path:'/about',
name:"About",
component:()=>import('./pages/About.vue')
}
]
const router = createRouter({
history:createWebHistory(),
routes
})
export default router
You technically didn't ask a question I will try to explain the error. Your error states what you try to do, importing a default export from the module 'vue' which doesn't exist.
// some ts file
import Vue from "vue";
// the module
export default {}
If there should be a named export called 'Vue' you should write it as follows: import { Vue } from 'vue'
references:
https://www.typescriptlang.org/docs/handbook/modules.html#default-exports
I'm looking for way to make the same logic of require.context of webpack in vitejs, I've found this plugin named vite-plugin-import-context, I tried it out but there's something that I didn't understand which is import dynamicImport from '../src/index' in the basic usage :
import { UserConfigExport } from 'vite';
import vue from '#vitejs/plugin-vue';
import dynamicImport from '../src/index';// <-- this is not described
export default (): UserConfigExport => {
return {
plugins: [vue(), dynamicImport(/*options*/)],
};
};
require should never be used in source code when using Vite. It's ESM only.
For Vite v2, import.meta.globEager can be used.
For Vite >v2, import.meta.globEager is deprecated. Use import.meta.glob('*', { eager: true }) instead.
import.meta.glob() is webpack alternative of require.context() . It has been added in vite since v2.3.4 .
Here is a link to the doc https://vitejs.dev/guide/features.html#glob-import
Yep, that example is directly taken from examples folder in the repo so it works only in that repo.
If you install the plugin via npm or yarn, the line should look like import dynamicImport from 'vite-plugin-import-context'
Here is how I import all the plugins/modules:
main.ts
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// styles here
import '#/assets/styles/tailwind.css';
import '#/assets/styles/main.scss';
// install all modules under `modules/`
Object.values(
import.meta.glob<{ install: (ctx: any) => void }>('/src/modules/*.ts', { eager: true })
).forEach((module) => module.install?.(app));
app.mount('#app');
and here is how I keep things ready in my modules folder to export:
modules/pinia.ts
import { createPinia } from 'pinia';
export const install = (app: any) => {
app.use(createPinia());
};
modules/router.ts
import type { RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHashHistory } from 'vue-router';
import generatedRoutes from '~pages';
import { setupLayouts } from 'virtual:generated-layouts';
const routes: RouteRecordRaw[] = setupLayouts(generatedRoutes);
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export const install = (app: any) => {
app.use(router);
};
I am new with this vue and I got this error when I try to run (npm run serve):
***WARNING Compiled with 4 warnings
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/router/index.js
"export 'default' (imported as 'Vue') was not found in 'vue'
App running at:
Local: http://localhost:8080/
Network: http://10.2.220.30:8080/***
index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [{
path: "/home",
name: "home",
component: Home,
meta: {
requiresAuth: true
}
},
{
path: "/",
name: "login",
component: () =>
import ("../views/login.vue")
},
{
path: "/register",
name: "register",
component: () =>
import ("../views/register.vue")
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (localStorage.getItem("jwt") == null) {
next({
path: "/"
});
} else {
next();
}
} else {
next();
}
});
export default router;
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.css";
const base = axios.create({
baseURL: "http://localhost:4000"
});
Vue.prototype.$http = base;
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");
Vue v3:
import * as Vue from 'vue';
import * as VueRouter from 'vue-router';
const routes = [
// TODO
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes,
});
Vue.createApp(App).use(router).mount('#app');
https://next.router.vuejs.org/guide/migration/index.html
When you upgrade to vue v3 should upgrade vue-router to 'vue-router/next'
Offical website
and use this code instead to import the function
import { createRouter, createWebHistory } from 'vue-router'
and remove
Vue.use(VueRouter);
Make sure all dependencies installed.
eg. install the router
npm install vue-router#next --save
Type these commands in the project terminal
npm uninstall vue-router --legacy-peer-deps
npm install --save vue-router#3
It worked in my case the issue was due to vue-router version
https://blog.csdn.net/cxl1191628698/article/details/127352186