I've followed the laracast tutorial about Vue Workflow with Laravel.
So I have a main.js:
var Vue =require('vue');
import Tournament from '../components/Tournament.vue';
new Vue({
el: 'body',
components: {Tournament},
ready(){
alert('Ready To Go');
}
});
And then I have my Tournament.vue:
<template>
I can't see this text on screen
</template>
<script>
export default {
props: ['list'],
}
</script>
And then, in my HTML, I have that:
<tournament></tournament>
<script src="/js/tournaments.js"></script>
/js/tournament.js is generated by gulp.
I can see the alert, so Vue works fine.
What I cant see is my template.
I never see the sentence:
I can't see this text on screen
I also tried to display dynamic data with data(), but with no success.
Any idea what am I forgetting?
var Vue = require('vue');
import Tournament from '../components/Tournament.vue';
new Vue({
el: 'body',
components: {template: Tournament},
ready() {
alert('Ready To Go');
}
});
Does that work??
Related
Hi I am quite new to laravel and vue. I am trying to use vuex for the first time but could not figure out why.
I have installed vuex and have imported it in app.js like this
import Vuex from 'vuex';
Vue.use(Vuex);
and I am declaring the vue individually in the blade files so i am trying to do the same with vuex in the blade file
<script>
const store = new Vuex.Store({
state: {
village: ''
},
mutations: {
changeVillage (state,value) {
state.village = value;
}
}
});
var app = new Vue({
el: '#app',
store: store,
data: {
},
});
</script>
now the problem is vuex is not recognized and says its undefined.
i tried to declare the constant store in app.js but then this time it says store is undefined
any help will be appreciated
var app = new Vue({
el: '#app',
store: store,
data: {
},
methods: {
changeVillageMethod() {
var cval = 'somevalue';
this.$store.commit('changeVillage', cval)
},
},
computed: {
village() {
return this.$store.state.village;
},
},
});
Now you have access to village value and changeVillageMethod method in the template part.
I recommend reading Veux docs. https://vuex.vuejs.org/
try again according to the instructions:
import Vuex in the file bootstrap.js:
import Vuex from 'vuex';
...
window.Vuex = Vuex;
Vue.use(Vuex);
then make the following changes to the file app.js:
import store from './YOUR_FILE_WITH_DEFINITION_STORAGE_VARIABLE.js';
new Vue({
el: '#app',
store: new Vuex.Store(store)
});
and your storage JS file:
let store = {
...
};
export default store;
I'm new in vue.js.
My app.js is:
import { store } from './store';
const app = new Vue({
el: '#app',
store,
mounted(){
...
},
methods:{
...
}
});
I'm using laravel and I don't want every time to create components for very small reason.
Without making components app.js will be full of methods whose all are not useful in every pages. That's why I want a way to extend app.js from my home.blade.php file's
#section(scripts)
<script>
...
</script>
#endsection
(without creating any component).
Or, Updating/add in data:{ ... } & methods:{ ... } using that <script> .. </script> in *.blade.php
I've found a solution!
Use Mixin
Create mixin.js file besides app.js
For example
export var custom = {
data: {
show: true
},
methods: {
hide: function(){
this.show = false;
}
},
watch: {
...
},
...
};
and, in app.js file:
import { store } from './store';
import { custom } from './mixin'; //Import mixin
window.app = new Vue({
el: '#app',
mixins: [custom], // Add mixin var here
store,
});
/*
[note: for multiple: import {custom1, custom2, ...} and define [custom1, custom2, ...] ]
*/
More details: Official Documentation
I have been strugling for a few hours trying to install Vuetify in my laravel project but I cannot make it work correctly, the Vuetify components are working well but Icons and breakpoints are not, I tried everything and now Im kinda tired of this, I hope someone can help me...
Following the vuetify documentation I wrote this in my app.js
require('./bootstrap');
import Vue from 'vue';
import Vuex from 'vuex';
import router from './router'
import vuetify from './plugins/vuetify.js' // path to vuetify export
Vue.use(Vuex);
new Vue({
vuetify,
router,
}).$mount('#app')
and separately, a vuetify.js file
import '#mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
})
and added the vuetify-loader to my webpack.mix.js
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
]
}).sourceMaps();
mix.disableSuccessNotifications();
First of all, having this configuration the project wont even run, I get this error: "Error: Conflict: Multiple assets emit to the same filename fonts/vendor/#mdi/materialdesignicons-webfont.eot?a32fa1f27abbfa96ff2f79e1ade723d5"
So I removed the import "#mdi/font/css/materialdesignicons.css" from the vuetify.js file, no errors but the icons are not visible.
I took the code from the documentation of Toolbar and pasted in my project and this is how it looks
This is the code for that empty toolbar
<template>
<v-card
color="grey lighten-4" flat height="200px" tile>
<v-toolbar dense>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</template>
If I change iconfont from 'mdi' to 'mdiSvg' from the vuetify.js file I do get one icon but the others still missing
According to the documentation, this toolbar should look something like this:
but that's not it yet, I cannot even use vuetify breakpoints like $vuetify.breakpoint.smAndUp I get an undefined error in console
Using Vuetify with Laravel differs a little bit from the the documentation. and depends on Vuetify version and here how to install it for the last two versions
Vutify v1.5.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify); // to access $vuetify inside your Vue components
A little bit different in Vuetify v2.0.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
const app = new Vue({
vuetify: new Vuetify(), // to access $vuetify inside your Vue components
});
You can also if you like add vuetify.min.css inside app.scss file inside resources/sass folder along with material icons as follows:
// /resources/sass/app.scss
// Fonts
#import '~#mdi/font/css/materialdesignicons.min.css';
// Vuetify
#import '~vuetify/dist/vuetify.min.css';
go to the vuetifyjs website treeshaking method it is the best way!
https://vuetifyjs.com/en/getting-started/installation/
like the bellow!
import Vuetify, {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
} from 'vuetify/lib'
import fa from 'vuetify/lib/locale/fa'
Vue.use(Vuetify, {
components: {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
},
});
new Vue({
el: '#yourappid',
router: router,
render: h => h(App),
vuetify: new Vuetify({
rtl: true,
lang: {
locales: { fa },
current: 'fa',
},
}),
data() {
return {
breadcrumbs: [],
sidebarBg: "deep-purple"
}
}
});
I have problem with Event Handling in vue2 with Laravel 5.4 - nothing happen when i use click event on the button. No error or anything else.
My html (in fact its header.blade.php):
<div id="example">
<button v-on:click="exclick">Super btn</button>
</div>
My js (app.js in resources/assets folder)
require('./bootstrap');
new Vue({
el: '#example',
methods: {
exclick: function (event) {
alert("Log 1");
if (event) {
alert("Log 2");
}
}
}
});
const app = new Vue({
el: '#app'
});
JS compiled by gulp
Please help!
I am trying to use vue plugins but everytime I do I always get an Unexpected Identifier on the import line. Any suggestions?
HTML
<div id="content">
<h1>#{{ message }}</h1>
<v-select :value.sync="selected" :options="options"></v-select>
</div>
JS
new Vue({
el: '#content',
data: {
message: 'Hello Worldy'
},
import vSelect from "vue-select"
export default {
components: {vSelect},
data() {
return {
selected: null,
options: ['foo','bar','baz']
}
}
}
});
You can't import from where you're trying to
import vSelect from "vue-select"
new Vue({
el: '#content',
components: {
vSelect: vSelect
}
});
and then do the rest of it inside your component definition
Just in case another person encounter this same error sign in the console when using vue. As for me in my case, the import script was automatically created for one of the components I called in my Laravel blade template (by PhpStorm).
The importation is recommended to be called in the Js file where the instance of Vue is made, because of the need to compile import syntax of ES6 to ES5. See: https://medium.com/#thejasonfile/a-simple-intro-to-javascript-imports-and-exports-389dd53c3fac
Hope this helps someone save some time.
When you insert tag, which is related to your Vue.js component, in your blade file, PhpStorm indeed like Oluwatobi Samuel Omisakin wrote inserts such code
<script>
import MyComponent from "../../../js/components/myComponent";
export default {
components: {MyComponent}
}
</script>
in the end of your blade file. And this is brings you error in console. Just delete it and make import in you app.js file.