I need some help.
I am doing this tutorial https://www.udemy.com/share/102itcAkocdl9XTQ==/ and its not working as it should and not sure what I am doing wrong.
file structure
- components
- App.vue
- views
- Start.vue
- app.js
- bootstrap.js
- router.js
App.vue
<template>
<div>App component
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
Start.vue
<template>
<div>Start View</div>
</template>
<script>
export default {
name: "Start"
};
</script>
<style scoped></style>
app.js
import Vue from 'vue';
import router from './router';
import App from './components/App';
require('./bootstrap');
const app = new Vue({
el: '#app',
components: {
App
},
router,
});
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Start from './views/Start';
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Start,
}]
});
Please help if you see what i am doing wrong. The Start view is not showing, when it is apparently supposed to be.
Inside your app.js, try creating the instance like this
new Vue({
el: '#app',
router,
render: h => h(App)
});
Related
I am creating a single page application using laravel and vue. it's not loading index component on page load.
web.php
Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');
Welcome.blade.php
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
router.js file
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
const routes = [
{ path: '/', component: require('./components/IndexComponent.vue') },
{ path: '/login', component: require('./components/LoginComponent.vue') }
]
const router = new VueRouter({
routes:routes,
mode:'history'
})
export default new VueRouter({router})
app.js file
require('./bootstrap');
window.Vue = require('vue');
import vuetify from './vuetify';
import router from './router';
import Index from './components/IndexComponent';
import Login from './components/LoginComponent';
var app = new Vue({
el: '#app',
router,
vuetify,
components: {
'index-component':Index,
'login-component':Login
}
});
Index Component (IndexComponent.vue)
<template>
<router-link to="/" class="nav-item nav-link">Home</router-link>
<router-link to="/login" class="nav-item nav-link">Login</router-link>
<router-view></router-view>
</template>
I had the same problem. Open your project in chrome and press Ctrl + Shift + I (Open console). Now after the login you can see that there is a warning which says: No match for favicon.ico. To solve this problem you go to your routes file and define a redirect:
{
path: '/favicon.ico',
redirect: '/user/dashboard'
}
there is no error in my code or console. But my router-view doesn't appear anything. I work with laravel 7 in this project
This is my app.js
// import Vue from 'vue';
import VueRouter from "vue-router";
import App from './components/App';
import Newsfeed from "./views/Newsfeed";
require('./bootstrap');
window.Vue = require("vue");
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Newsfeed },
]
const router = new VueRouter({
routes,
mode: 'history'
})
const app = new Vue({
components: {
App
},
router: router
}).$mount('#app');
This is my App.vue
<template>
<div class="flex flex-col flex-1 h-screen overflow-y-hidden">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
This is my Newsfeed.vue
<template>
<div class="flex flex-col items-center py-4">
Hello
</div>
</template>
<script>
export default {
name: "Newsfeed"
}
</script>
Can you help me? Thanks!
I'm experiencing a weird issue in vue. I've set up a component to view details of an item, this component accepts props and renders on first load but when i reload the page, the entire component disappears including the Root.
I've tried to name router-view but it doesn't work.
MainApp.vue
<template>
<div class="container">
<div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<script>
export default{
}
</script>
Routes.js
import ViewProduct from './store/View.vue'
const routes = [
{
name: 'viewProduct',
path: 'product/:id/view/:slug',
component: ViewProduct,
props: true
}
];
export default routes;
Main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';
const router = new VueRouter({ mode: 'history', routes});
import MainApp from './MainApp'
import store from './store/store/index'
new Vue({
el: '#storeapp',
render: h => h(MainApp),
router,
store: store,
});
I have another router-view container which works fine but this one does not.
I'm trying to use VAutocomplete within a vue component in my laravel project.
I installed vuetify like this:
npm install vuetify
The .js with which I load the component looks like this:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
import 'vuetify/dist/vuetify.min.css';
import MyComponent from './components/MyComponent.vue';
const app = new Vue({
el: '#my-component,
components: {
MyComponent
},
render: h => h(MyComponent)
});
MyComponent.vue:
<template>
<div>
<v-autocomplete
label="Components"
:items="components"
></v-autocomplete>
</div>
</template>
<script>
export default {
name: "MyComponent",
data: function () {
return {
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
],
}
},
}
</script>
I see the following error in the browsers console:
[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.$vuetify.lang.t')"
found in
---> <VAutocomplete>
Laravel is 5.6
Vue 2.9.6
Vuetify 2.0.2
Can someone please give me a hint to get started with vuetify? Thanks!
I had the same problem. Here is how you could solve it:
Make sure to add the correct vue and vue-template-compiler versions to your package.json.
Then remove your 'node_modules' folder and reinstall it:
npm install
You also should import the VueLoaderPlugin in you webpack.mix.js.
const VueLoaderPlugin = require('vue-loader/lib/plugin')
Your mix call should look something like this:
mix.js('resources/assets/js/app.js', 'public/js').extract(['vue'])
.js('resources/assets/js/mycomponent.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css').webpackConfig({
plugins: [
new VueLoaderPlugin()
]
}).sourceMaps();
.sourceMap() to avoid missing vuetify.js.map error.
Error is because you missed a "
const app = new Vue({
el: '#my-component', <=here
components: {
MyComponent
},
render: h => h(MyComponent)
});
The other error is that you don't have ID in your template.
It should work in this way:
<div id="my-component">
<v-app id="inspire">
<div>
<v-autocomplete
label="Components"
:items="components"
></v-autocomplete>
</div>
</v-app>
</div>
Script:
new Vue({
el: '#my-component',
vuetify: new Vuetify(),
data () {
return {
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields'],
}
},
})
I try to implement VueRouter in Laravel project but arreas error Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './components/App'
import ExampleComponent from './components/ExampleComponent'
import ExampleComponent1 from './components/ExampleComponent1'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
component: ExampleComponent
},
{
path: '/example',
component: ExampleComponent1
}
]
})
const app = new Vue({
el: '#app',
router,
template: `<app></app>`,
components: {
App
}
})
components/App.vue
<template>
<div>
<div>
<router-link :to="'/'"></router-link>
<router-link :to="'/example'"></router-link>
</div>
<div>
<router-vue></router-vue>
</div>
</div>
</template>
<script>
export default {
}
</script>
how can I connect correctly vue-router?
I see that you've misspelled <router-view /> in App.vue which is probably causing the warning.