I have tried every thing but it doesn't work for me, I provide router
setup link, but it throws me an exception
These relative modules were not found:
./AppContact.vue; in ./src/main.js
./AppHome.vue in ./src/main.js
./AppLogin.vue in ./src/main.js
./AppToolbar.vue; in ./src/main.js
Main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import AppToolbar from './AppToolbar.vue;'
import AppContact from './AppContact.vue;'
import AppLogin from './AppLogin.vue';
import AppHome from './AppHome.vue';
Vue.use(Vuetify)
Vue.use(VueRouter)
Vue.config.productionTip = false
const routes =[
{path:'/',components:App},
{path:'/AppToolbar',components:AppToolbar},
{path:'/AppContact',components:AppContact},
{path:'/AppLogin',components:AppLogin},
{path:'/AppHome',components:AppHome}
];
const router = new VueRouter({
routes,
mode:'history'
});
new Vue({
el:'#app',
router,
render: h => h(App)
})
App.vue
<template>
<div id="app">
<app-toolbar></app-toolbar>
<router-view> </router-view>router-view>
<app-footer style="position:absolute;z-index:-1"></app-footer>
</div>
</template>
<script>
import AppToolbar from './components/AppToolbar'
import AppFooter from './components/AppFooter'
export default {
name: 'app',
components: {
AppToolbar,AppFooter
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
1. Remove the ; from the paths
i.e: './AppToolbar.vue;' should be './AppToolbar.vue';
2. Point to the correct directory
which I'm guessing is components
Main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import AppToolbar from './components/AppToolbar.vue';
import AppContact from './components/AppContact.vue';
import AppLogin from './components/AppLogin.vue';
import AppHome from './components/AppHome.vue';
// etc...
Related
I want to route HomeView.vue view to App.vue and this is my code.
...............................................................
Main.js
import Vue from 'vue'
import router from './router/index'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
vuetify,
router,
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<router-view />
</template>
<script setup></script>
<style lang="scss"></style>
HomeView.vue
<template>
<p>Home</p>
</template>
<script>
export default {}
</script>
<style lang=""></style>
Router/indes.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
I tride use ".$use(router)" before .$mount(#app)
Someone can help?
I created a vue app using vuejs 2 and vuex 3.
Here is the code:
App.vue :
<template>
<div id="app">
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>
<button v-on:click="increment">Test</button>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
main.js
import Vue from 'vue'
import router from './router.js'
import VueRouter from 'vue-router';
import App from './App.vue'
import Vuex from 'vuex'
import store from './store.js'
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router: router,
store: store,
template: '<App/>',
components: { App },
render: h => h(App),
}).$mount('#app')
When I click at the button in App.vue file. it always throw error that this.$store is undefined. Did i do something wrong?
But when i add the following code in the main.js file. Everything work smoothly.
Vue.prototype.$store = store;
But did I already registered the store in Vue constructor. Why do I need that code? Can anyone show me the best way to fix it`? Thank you.
Turns out I install wrong version of vuex (v4 instead of v3). Problem solved.
This is my folder
+src
+components
+Logo.vue
App.vue
main.js
In my main.js I had been import the file
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Logo from '#/components/Logo.vue'
createApp(App).use(router).mount('#app')
This is my App.vue
<template>
<div>
<Logo />
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
And I was stucked at how to link my Logo.vue into App.vue
You can register the component globally by using:
app.component("Logo", Logo);
Example:
...
const app = createApp(App);
// Register component globally
app.component("Logo", Logo);
app.use(router);
app.mount("#app");
...
Read more in the official docs.
I'm trying to set up a Vue project using vue-cli 3.x, typescript, pug and .sass files.
I also want to import a couple files globally so that they are available in all my components (I followed this guide)
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from '#/router'
import store from '#/store'
import './registerServiceWorker'
import '#/sass/main.sass'
main.sass
#import partials/variables
#import ../../node_modules/globl.css/main
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/sass/partials/_variables.sass";
#import "./node_modules/globl.css/partials/_mixins.sass";
`
}
}
}
}
Navbar component giving me errors
<template lang="pug">
.navbar Navbar
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>
<style lang="sass">
.navbar
color: red
</style>
Error log
I noticed that if I remove the sass from the component and convert it to scss the error goes away...
The other issue, in the main.sass file, is still a mystery to me..
I am trying to make simple Vuex app and here are my files:
main.js
/* eslint-disable no-unused-vars */
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
// TODO make it work with css-loader, dunno why it's not working at my environment
import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
isLogged: false
},
mutations: {
logIn (state) {
state.isLogged = true
},
logOut (state) {
state.isLogged = false
}
}
})
store.commit('logIn')
console.log('main', store.state.isLogged)
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
App.vue
<template>
<b-container>
<b-row align-h="center">
<b-col cols="4">
<div id="app">
<router-view/>
</div>
</b-col>
</b-row>
</b-container>
</template>
<script>
// import store from './store'
// store.commit('logOut')
console.log('app', this.$store)
export default {
// name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Also I'm using vue-router:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
import Login from '#/components/Login'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
}
]
})
And after initializing the store in the main.js and injecting in the App.vue component the this.$store variable in App.vue is undefined; but at the same time in main.js all is okay.
Also trying to import the store from the App.vue (later I stored store in store/index.js) make new store, without changed state in main.js.
Your console.log('app', this.$store) is outside of your export default {}
And in any case, the this.$store code should be placed inside any of the following:
computed() {}
mounted()
methods: {}
At the point where you're attempting to access this.$store, this doesn't point to the Vue instance.
You can access the store in one of the life-cycle hooks for the Vue instance (e.g. created):
created() {
console.log(this.$store);
}