This is api for maps I would like to use in laravel in a vue component.
app.js
import Vue from 'vue';
import ExampleComponent from "./components/ExampleComponent";
import YmapPlugin from 'vue-yandex-maps';
import YandexComponent from "./components/YandexComponent";
require('./bootstrap');
Vue.use(YmapPlugin)
const app = new Vue({
el: '#app',
components: {
YandexComponent
}
});
YandexComponent.vue
<template>
<yandex-map :coords="coords">
<ymap-marker
marker-id="123"
:coords="coords"
:marker-events="['click']"
></ymap-marker>
</yandex-map>
</template>
<script>
export default {
name: 'YandexComponent',
setup() {
return {
coords: [54, 39],
}
}
}
</script>
<style>
.ymap-container {
height: 600px;
}
</style>
How to use api for laravel/vue https://vue-yandex-maps.github.io/en/
It doesn't want to work...
Related
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)
});
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 making a sidebar that can have dynamic content, using vuex
So, for exaple, I have this app with a Sidebar.vue that can loads a DynamicContent.vue, how do I pass a prop to that DynamicContent.vue inside
app.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import store from './store'
import Sidebar from './components/Sidebar'
import DynamicContent from './components/DynamicContent.vue'
Vue.component('sidebar', Sidebar)
const app = new Vue({
el: '#app',
store,
data() {
return {
dynamicContent: DynamicContent
}
},
methods: {
toggleSidebar() {
this.$store.commit('toggleSidebar', dynamicContent)
}
}
})
Sidebar.vue
Notice: I can't pass my props throught that component tag cause the components can have differents props
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
export default {
computed: {
component() {
return this.$store.state.sidebarComponent
}
}
}
</script>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
sidebarOpen: false,
sidebarComponent: null
},
mutations: {
toggleSidebar(state, component) {
state.sidebarOpen = ! state.sidebarOpen
state.sidebarComponent = component
},
}
})
To dynamically bind props, you can use v-bind this way
<template>
<div>
<component :is="component" v-bind="componentProps"/>
</div>
</template>
<script>
export default {
computed: {
component() {
return this.$store.state.sidebarComponent
}
componentProps {
return { prop1: 'value', prop2: 123 }
}
},
}
</script>
v-bind takes an object and pass all properties in it as props to component.
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.
I do not know what I'm doing wrong, but my router-view does not work.
I have an app based on Laravel 5.6 and I want to make views through vue.js.
Components "Navbar" and "Foot" are load correctly but I don't see "Home" component which should be load by in App.vue
Routing also does not work. When I type in the browser /about I get an error "Sorry, the page you are looking for could not be found."
Below my files:
App.vue
<template>
<div class="app">
<Navbar/>
<router-view></router-view>
<Foot/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return{
}
}
}
</script>
Home.vue
<template>
<div class="home">
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
}
}
}
</script>
About.vue
<template>
<div class="about">
<h1>O nas</h1>
</div>
</template>
<script>
export default {
name: 'About',
data (){
return{
}
}
}
</script>
app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
window.Vue = require('vue');
Vue.use(VueRouter);
Vue.use(Vuex);
let AppLayout = require('./components/App.vue');
// home tempalte
const Home = Vue.component('Home', require('./components/Home.vue'));
// About tempalte
const About = Vue.component('About', require('./components/About.vue'));
// register components
const Navbar = Vue.component('Navbar', require('./components/Navbar.vue'));
const Foot = Vue.component('Foot', require('./components/Foot.vue'));
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
name: 'About',
path: '/about',
component: About
}
];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(
Vue.util.extend(
{ router },
AppLayout
)
).$mount('#app');
You need to teach laravel's router how to play along with vue's.
Check out this link: https://medium.com/#piethein/how-to-combine-vuejs-router-with-laravel-1226acd73ab0
You need to read around where it says:
Route::get('/vue/{vue_capture?}', function () {
return view('vue.index');
})->where('vue_capture', '[\/\w\.-]*');