I' using laravel with vue. In assets folder I created bra.js file with variable.
var name="John"
Then in main.js I added bra.js
require('./bra');
I want to use var name in component.vue like below but I can't.
<template>
<div>
<p> {{ name }}</p>
</div>
</template>
Please help.
<template>
<span>{{ variableVisibleInTemplate }}</span>
</template>
<script>
export default {
data() {
return {
variableVisibleInTemplate: variableVisibleInScript
};
}
};
</script>
You return exactly one variable
src/assets/bra.js
var name = "John";
module.exports = name;
src/App.vue
<template>
<span>{{ name }}</span>
</template>
<script>
import name from "./assets/bra.js";
// or:
// const name = require("./assets/bra.js");
export default {
data() {
return {
name: name
};
}
};
</script>
You return many variables
src/assets/bra.js
var name = "John";
module.exports = {
name: name
};
src/App.vue
<template>
<span>{{ name }}</span>
</template>
<script>
import { name } from "./assets/bra.js";
// or:
// const { name } = require("./assets/bra.js");
export default {
data() {
return {
name: name
};
}
};
</script>
Read also: Understanding module.exports and exports in Node.js
commonmodule, you have to export a variable, then importconst bra = require('./bra')