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.
Related
With a newly created Laravel with Inertia and Vue project, I have an error that it runs code inside my vue components twice.
For a simple test demo, I have a Test.vue, with this code
<template>
<div>
TEST
</div>
</template>
<script>
export default {
name: "Test",
mounted() {
console.log('test')
}
}
</script>
<style scoped>
</style>
Route in web.php:
Route::get('/test', array(App\Http\Controllers\DashboardController::class, 'test'));
In controller:
public function test(): Response
{
return Inertia::render('Test');
}
When I go to the route /test, it echoes out 'test' twice on mounted in my console. In more advanced components which calls APIs and such, also calls them twice.
I suspect maybe my project is set up wrongly, in app.blade.php or app.js but cannot figure it out.
I followed the guides on https://inertiajs.com/server-side-setup and https://inertiajs.com/client-side-setup to set this up.
My source code is here: https://github.com/ekstremedia/laravel-inertia
Edit: It seems to only echo out twice in the first component I load. If I in that component link to another component, and go there, it doesn't load that twice.
I found that this is solved by modifying your app.js file in your resources directory thus:
import Vue from 'vue'
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue'
Vue.use(InertiaPlugin)
new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
}).$mount(app);
Your problem seems to have been in how you initialized your inertia app.
I am trying to import vue into laravel appjs file but am seeing no result.
My component is called Dash.vue and its located in 'resources\js\components'
The code below is what i have tried
import Dash from 'resources\js\components';
new Vue({
components: {
"Dash": YourComponent
});
try with:
import Dash from './resources/js/components/Dash';
new Vue({
components: {
Dash
});
I have a Laravel installation and want to use vuejs for the fornt-end. So, I ran npm install --save vuex and all the installation was successful.
The in app.js ( /resources/js/app.js ) I imported the store file and added it to the vue instance object:
import store from './store/store'
const app = new Vue({
el: '#app',
router,
store
});
Inside store.js I have the following:
import Vue from 'vue'
import Vuex from 'vuex'
import jobs from './modules/jobs'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
jobs
}
});
The jobs.js (store/modules/jpbs.js):
const state = {
value: 1,
jobs: [
{ name: 'Milton', age: '23'}
]
}
const getters = {
jobs: state => {
return state.jobs;
},
value: state => {
return state.value;
}
}
//EDITED
export default {
state,
getters
};
Ultimately, I tried to test how things go if I get anything from the state or getter:
<button type="button" class="btn bgDark mt-2" data-toggle="modal" data-target="#exampleModalCenter">
Add New {{ this.$store.state.value }}
</button>
When I visit my site, the value does not show and I dont see errors in the console.
Is there perhaps anything I missed in the vuex configuration?
If you are trying to get the value from your jobs.js module you need the to reference it like this:
this.$store.state.jobs.value
( the this is optional)
If you look at the first example in the Vuex Documents - The last two lines of code are
store.state.a
store.state.b
where a and b are the module names (jobs in your case)
this should not be used within html templates, Vue automatically assumes that variables or objects written within brackets {{ }} are attributes of this.
I have tried multiple different plugins with my Vue.js cli webpack projects and I am getting the same problem with all of them, namely that once I have included a plugin, I am unable to use it.
As an example. I have tried to use the plugin at this link. https://www.npmjs.com/package/vue-sessionstorage
Here is my main.js file
import Vue from 'vue'
import router from './router'
import VueMaterial from 'vue-material'
import { store } from './store'
import 'vue-material/dist/vue-material.css'
import 'vue-style-loader'
import VueSessionStorage from 'vue-sessionstorage'
import App from './App'
Vue.use(VueMaterial, VueSessionStorage);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
});
I have run npm install --save vue-sessionstorage
As you can see, I have also imported VueSessionStorage
However, when I try to use it like this
methods: {
login: function () {
console.log("Login clicked");
this.$session.set('username','simon')
console.log(this.$session.get('username'));
},
register: function () {
console.log(this.$session.get('username'));
}
}
I get the error
vue.esm.js?65d7:563 TypeError: Cannot read property 'set' of undefined
at VueComponent.login (Login.vue?2ddf:35)
at boundFn (vue.esm.js?65d7:179)
at Proxy.invoker (vue.esm.js?65d7:1821)
at Proxy.Vue.$emit (vue.esm.js?65d7:2331)
at click (mdButton.vue?3bf8:38)
at HTMLButtonElement.invoker (vue.esm.js?65d7:1821)
handleError # vue.esm.js?65d7:563
Vue.$emit # vue.esm.js?65d7:2333
click # mdButton.vue?3bf8:38
invoker # vue.esm.js?65d7:1821
Vue.use does not permit multiple plugins to be initialized at once like that. Initialize them as two separate calls:
Vue.use(VueMaterial);
Vue.use(VueSessionStorage);
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??