webページからPostgreSQLに動的にアクセスしたい

前提・実現したいこと

vue.jsを用いて作成したwebページにて、ボタンを押すとPostgreSQLにアクセスしてデータを取ってくるような処理を作成したいのですが上手くいきません。
node.jsでPostgreSQLを叩いた時とほぼ同じようなコードを使用しているのが問題かとは思うのですが、webページからPostgreSQLに動的にアクセスするにはどのように実装すれば良いのかが分かりません。お手数ですが、ご教授いただければ幸いです。

追記：これはサーバーサイドでのみ動くモジュールのようです。webページからPostgreSQLを叩く方法(できればvue.jsを用いて)をご教授いただければ幸いです。

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

ボタンを押すと以下のような警告・エラーが表示されます(GoogleChrome Console)

[Vue warn]: Error in v-on handler: "Error: Cannot find module 'net'"

found in

---> <VBtn>
       <VContent>
         <VApp>
           <App> at src/App.vue
             <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3882
click @ VBtn.js?8336:75
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911


Error: Cannot find module 'net'
    at webpackEmptyContext (eval at ./node_modules/defaultable sync recursive (app.js:3110), <anonymous>:2:10)
    at Object.workaround_require (defaultable.js?6987:49)
    at require (defaultable.js?6987:77)
    at eval (server.js?663d:9)
    at defaulter (defaultable.js?6987:83)
    at defaultable (defaultable.js?6987:63)
    at good (defaultable.js?6987:174)
    at Object.eval (server.js?663d:5)
    at eval (server.js:242)
    at Object../node_modules/hbo-dnsd/server.js (app.js:3704)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3882
click @ VBtn.js?8336:75
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911

該当のソースコード

vue
1//App.vue
2<template>
3  <v-app>
4    <v-content>
5      <v-btn small color="#66cdaa" @click="postgreSQL()">attack DBS!</v-btn>
6    </v-content>
7  </v-app>
8</template>
9
10<script>
11export default {
12  name: 'App',
13  components: {
14  },
15  data () {
16    return {
17    }
18  },
19  methods: {
20    postgreSQL: function () {
21      const pg = require('pg'); //この1行を読んだ時点でエラーが出る
22      const config = {
23        user: 'user-name',
24        host: 'test-pos.hogehoge.us-west-2.rds.amazonaws.com',
25        database: 'testPos',
26        password: 'testHogeHoge',
27        port: 5432,
28        ssl: true
29      };
30
31      const client = new pg.Client(config);
32
33      client.connect(err => {
34        if (err){
35          throw err;
36        } else {
37          this.queryDatabase(client);
38        }
39      });
40    },
41
42    queryDatabase: function(client) {
43        const query = `
44          DROP TABLE IF EXISTS top_type;
45
46          CREATE TABLE top_type (type_id text, name text, "order" integer, "title" text);
47          INSERT INTO top_type (type_id, name, "order", "title") VALUES ('test', 'hoge1', 3, 'hey');
48          INSERT INTO top_type (type_id, name, "order", "title") VALUES ('testxx', 'hoge2', 4, 'hello');
49        `;
50
51        client.query(query)
52          .then(() => {
53            alert('Table created successfully');
54            client.end(alert('Closed client connection'));
55          })
56          .catch(err => alert(err))
57          .then(() => {
58            alert('Finished execution');
59            process.exit();
60          });
61    }
62  }
63}
64</script>
65