G Suite（Google Apps Script）とVue.jsの連携 #Vue.js

vue.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<script>  
  var app = new Vue({
    el: '#app',
    data: {
      email: '',
    },
    methods:{
      initEmail: function(sessionEmail){
        this.email = sessionEmail;
      },           
    },
    created: function(){
      google.script.run
        .withSuccessHandler(this.initEmail).getLoginID();
    },
  })
</script>

コード.js

function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  return html;
}

function getLoginID() {
  var email = Session.getActiveUser().getEmail();
  Logger.log(email);
  return email;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="app">
    {{ email }}
  </div>
  </body>
  <?!= HtmlService.createHtmlOutputFromFile('vue').getContent(); ?>
</html>