VueJS error after importing a function into a js file

Question

I have made a js script that allows me to send data to a database and I would like to import it into my .vue file so that I can use it when I click on a button. The problem is that Vue is showing me this error when I have the script imported and nothing is displayed on the page:

warning in ./src/views/Journal.vue?vue&type=script&lang=js&
"export 'default' (imported as 'mod') was not found in '-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Journal.vue?vue&type=script&lang=js&'

my js script :

const mysql = require("mysql");
async function main(userID, text) {
 const connection = mysql.createConnection({
 host: "",
 user: "",
 password: "",
 database: "",
 });
 connection.connect(function (err) {
 if (err) throw err;
 console.log("Connected!");
 var sql = `INSERT INTO 'journal' ('userID', 'journalTXT') VALUES ('${userID}', '${text}')`;
 connection.query(sql, function (err) {
 if (err) throw err;
 console.log("1 record inserted");
 connection.destroy();
 });
 });
}
main();

my vue page :

<template>
 <div class="about" v-if="!$auth.isAuthenticated">
 <h1>Bienvenue sur ton journal</h1>
 <h2>Continue d'écrire ce qu'il te passe par la tête</h2>
 <v-container fluid>
 <v-row>
 <v-col cols="7" sm="12">
 <v-form>
 <v-textarea
 id="textarea"
 counter
 placeholder="Commence à écrire quelque chose ici "
 label="Mon journal"
 v-model="journal_txt"
 ></v-textarea>
 </v-form>
 </v-col>
 </v-row>
 <br />
 <v-btn elevation="2" x-large v-on:click="dataExport(journal_txt)"
 >Sauvegarder mon travail</v-btn
 >
 </v-container>
 </div>
</template>
<script>
import main from "@/sendToDB.js";
module.exports = {
 data: function () {
 return {
 journal_txt: "",
 };
 },
 methods: {
 dataExport: function (txt) {
 main.main("1", txt);
 },
 },
};
</script>

If anyone has the solution, I'll gladly take it ;)

• muka.gergely: I don't see your main function being exported in your example. module.exports? or a simple export default?

Answer 1

You trying load NodeJS script from the client via VUE, its impossible because vue is rendering in the client only.

you should consider use Nuxt.JS

https://nuxtjs.org

Via nuxt you can create server middleware and use the connection via axios or $http to your api middleware in order to update your database.

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-servermiddleware

Hope its helped.

• Louis GALLET: Do I have to start my project all over again or do I just have to install nuxtJS?
• Eliran Givoni: Nuxt.js is framework for Vue. so you need to install it independently, the nuxt contain file structure and make the works with Vue very easy.