I'm practicing laravel with vuejs and I'm wondering if possible to use vuejs (component) variable in other file with pure javascript.
I created my.js and registered it in app.js.
require('./my.js');
const app = new Vue({
el: '#app'
});
In my.js I have following code.
alert(app.name)
name is variable used in vuejs component. As a result I received alert undefined. Please give me some guidelines.
You must run the code in the correct order:
function MyFunc(vm) {
alert(vm.name)
}
const app = new Vue({
data: {
name: 'FooBar'
}
});
MyFunc(app)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Example 1
my.js:
export default function(vm) {
alert(vm.name);
}
main.js:
import Vue from "vue";
import MyFunc from './my';
const app = new Vue({
data: {
name: 'FooBar'
}
});
MyFunc(app)
Example 2
my.js:
export default (app) => alert(app.name);
vue.js:
import Vue from 'vue';
export default new Vue({
data: {
name: 'FooBar'
}
});
main.js:
import bar from './vue'
import foo from './my'
foo(bar)
Related
I am developing an application using Nuxt.js3 and supabase.
Nuxt.js in plugins/supabase.server.js (I haven't figured out if server or client is better for this too.) I want to use "supabase = createClient(~~)" from index.vue.
However, I get undefined, either because the import is not working or because I am calling it the wrong way.
If I use the mustache syntax and call it like "{{ $supabase }}", the function will appear.
(I am not good at English, so I use translated sentences.)
plugins/supabase.server.js
import { defineNuxtPlugin } from '#app'
import { createClient } from '#supabase/supabase-js/dist/main/index.js'
export default defineNuxtPlugin(nuxtApp => {
const config = useRuntimeConfig();
nuxtApp.provide('supabase', () => createClient(config.supabaseUrl, config.supabaseKey))
})
declare module '#app' {
interface NuxtApp {
$supabase (): string
}
}
pages/index.vue
<script setup>
console.log($supabase) //$supabase is not defined
</script>
<template>
{{ $supabase }} // () => createClient(config.supabaseUrl, config.supabaseKey)
</template>
Please import useRuntimeConfig from '#app'. So in your example change the first line:
import { defineNuxtPlugin } from '#app'
Into:
import { defineNuxtPlugin, useRuntimeConfig } from '#app'
Right now I am getting these errors:
Uncaught TypeError: Cannot set property 'render' of undefined
Cannot find element: #main
Here is the code I have, I have tried to look for other answers but they don't seem to help. I am trying to create a simple Search Filter using VueJs Vuetify and plain JavaScript.
//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import VueResource from 'vue-resource'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
Vue.use(VueResource)
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
components: { App },
render: h => h(App)
}).$mount('#app')
<!-- Vue Page -->
<template>
<div id="main">
Search: <input type="text" v-model="search"/>
<div v-bind:v-for="customer in filteredCustomers">
<span>{{customer.name}}</span>
</div>
</div>
</template>
<script>
const app = new Vue({
el: "#main",
data: function(){
return {
search: '',
customers: [
{ id: '1', name: 'Something', },
{ id: '2', name: 'Something else', },
{ id: '3', name: 'Something random', },
{ id: '4', name: 'Something crazy', }
]};
},
computed:
{
filteredCustomers:function()
{
var self=this;
return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
//return this.customers;
}
}
});
</script>
How can I fix these errors? :)
Not sure if this is the cause, but you shouldn't be instantiating a Vue instance inside a single file component.
Instead of this:
<script>
const app = new Vue({
...
})
</script>
you should do this:
<script>
export default {
...
}
</script>
Secondly, you're trying to mount the main Vue component onto the #main element which doesn't exist in the DOM because it is within the template of the main component. This is a chicken-and-egg problem.
You should already have a element like <div id="main"></div> somewhere in the DOM before you try to mount a Vue component onto it.
The el component option should only be used when you want the component to be mounted onto an existing element after it is instantiated. For reusable components (i.e. not the root component) you typically do not want this.
I am new in vue js, I am learning components. I have created a basic program containing component. Following are my files
project/src/main.js
import Vue from 'vue'
window.Vue = Vue;
import ButtonCounter from './components/ButtonCounter.vue'
new Vue({
el: '#components-demo',
render: h => h(ButtonCounter)
})
project/src/components/ButtonCounter.vue
<template>
<div id="components-demo">
<button-counter></button-counter>
</div>
</template>
<script>
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
</script>
When I execute this, I get following error, even though I have declared Vue globally in main.js
So it looks like you took the component definition and just moved to another file. If you move to another file you don't need to use Vue.component. You just export an object containing the data, methods, etc. that you want attached to the component. And inside the Vue instance you attach the imported component via the components property. I.e.
Main index.html
<div id="components-demo">
<button-counter></button-counter>
</div>
Component.vue
<template>
<button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>
<script>
export default {
data: function () {
return {
count: 0
}
}
})
</script>
Then inside your main file
import Vue from 'vue'
// window.Vue = Vue; -- don't need this anymore
import ButtonCounter from './components/ButtonCounter.vue'
new Vue({
el: '#components-demo',
render: h => h(ButtonCounter),
components: {ButtonCounter}
})
The error is in this line
window.Vue = Vue;
Just import and create a new instance of Vue
import Vue from 'vue'
import ButtonCounter from './components/ButtonCounter.vue'
new Vue({
el: '#components-demo',
render: h => h(ButtonCounter)
})
I have main.js and app.vue file
main js file inner look like this
var a = 1;
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
in App.vue file i want to console.log(a)
return error a is not defined why ? What is wrong ?
You need to export the variable, and then import it into another file where you want it. The best way to do that would be to put the variable a in its own module file. This allows you to avoid using global variables, which pretty much negate the purpose of modules!
a.js:
export const a = 'foo'
App.vue:
<script>
import { a } from './a.js'
console.log(a) // foo
console.log(1)
export function log3() {
console.log(3)
}
</script>
main.js:
import { log3, default as App } from './App.vue'
console.log(2)
log3()
new Vue({
el: '#app',
render: h => h(App)
})
import { a } from './a.js'
console.log(a) // foo
Here is what will be logged to the console:
'foo' (from App.vue)
1 (from App.vue)
2 (from main.js)
3 (from main.js calling the function log3 from App.vue)
'foo' (from main.js)
Now both App.vue and main.js have access to a, because they have explicitly imported it. The fact that App.vue has access to a has nothing to do with the fact that main.js also has access to a.
The simplest thing you can do I guess is define data properties insode root instance, and access them as this.$root.myProperty from components:
new Vue({
el: '#app',
data: {
myGlobal: 'Hi there'
},
components: {
'child' : {
template: `<p>{{ text }}</p>`,
data: function() {
return {
text: this.$root.myGlobal
}
}
}
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<child></child>
</div>
Another option - a simple plugin as a central storage: https://stackoverflow.com/a/44517332/7636961
a is not defined in your App component but directly in main.js.
You may want to use a global variable. (see also this thread for global variable in vuejs)
I have a simple demo I wanna try out to learn more about VueJS components. But when I load my page, I receive the error: Unexpected Token Import, in this line
import GISView from './components/GISView.vue';
when I remove this, GISView is not defined. I use Laravel 5.4 and webpack for compiling the scripts. Why is the component not found?
Main.js
import GISView from './components/GISView.vue';
window.Vue = Vue;
window.Event = new class {
constructor() {
this.Vue = new Vue();
}
fire(event, data = null) {
this.Vue.$emit(event, data);
}
listen(event, callback) {
this.Vue.$on(event, callback);
}
};
window.app = new Vue({
el: '#app',
components: {
GISView: GISView
},
data: {
},
methods: {
init: function() {
this.$broadcast('MapsApiLoaded');
}
}
});
GISView.vue
<script>
import GoogleMaps from '../mixins/GoogleMaps.js';
export default {
mixins: [GoogleMaps]
}
</script>
I really got stuck for hours on this because just by the code, it should work I would say.
You are not using a proper parser like vueify to properly parse .vue files in your webpack/gulp script.