Vue.jsのコンポーネント内でSQLiteを扱いたい

Question

前提・実現したいこと

SPAの勉強をしております。
データベースとしてSQLiteを利用したいのですが、コンポーネント(hoge.vue)からassets内のファイル(test.db)を読み込もうとするとコンパイルエラーとなってしまいます。

webpackの設定が悪いみたいなのですが、上手くできずに困っています。
アドバイスを頂けると嬉しいです。

発生している問題・エラーメッセージ

error in ./src/assets/test.db

Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

該当のソースコード

<script>
import SQL from 'sql.js';

export default {
  name: 'hoge',
  data() {
    return {
      sqlite: require('@/assets/test.db'), // これが失敗する
    };
  },
  methods: {
    select() {
      const dataBase = new SQL.Database(this.sqlite);
      const sql = 'SELECT * FROM table1';
      const res = dataBase.exec(sql);
      console.log(res);
    },
  },
};
</script>

試したこと

webpack.base.conf.jsを編集してfile-loaderで読み込むなどしてみましたが、sql.jsに、「これはデータベースではない」と怒られました。

fs.readFile(path.join(__dirname, '../assets/test.db'), 'utf8')
というのも試しましたが、こちらもダメでした。

補足情報（FW/ツールのバージョンなど）

環境はvue-cliで準備しました。
Vue:2.5.2
webpack:3.7.1
node:6.9.1

Answer 1

Vuexのstoreを使うと指定したURLからSQLiteファイルを読み込んで扱えるようです。
ただ、ファイルサイズがあまり大きいと上手く動かないので、やはり別でデータベース用のサーバーを立ててaxios等で引っ張ってくるのが良さそうです。
閲覧・ご回答、ありがとうございました。

参考：
https://github.com/skysign/public/tree/master/vue.js/boilerplate/vuejs-sqljs-boilerplate

Answer 2

すいません、vue.jsに精通してないのですが、node.jsとかサーバーサイドで動くプログラムを利用しないと無理なのでは？

ブラウザで動作するjavaScriptは、動作がスタートした時点ではクライアントにある訳なので、クライアントからサーバーに接続し、SQLiteの中身を読むプログラムが動作して、その結果を通信で受け取りブラウザに表示されるという流れなので・・・

クライアントからサーバーにあるデータベースを直接開いたり編集することはできないでしょう。

phpやrubyやpythonなどのサーバーサイドプログラムをajaxなどで動作させ、結果をVue.jsが受け取って描画するような流れになるはずです