Vue.js with Google Apps Script Web Services

-
Hi Apps Script Developer,



Today,  I am sharing how to implement Vue.js framework with Google Apps Script Web Services.

First, you need to copy Vue.js CDN link from Vue.org site there are two links one for the Development environment and another is for Production.
For Development I am using Developer links it gives more error and warring descriptions.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. Create Apps Script web app "Responsive Web Apps using Google Apps Script" 
  2. Add Script tag in JavaScript.html file after Jquery framework link.
  3. Save it
  4. In this example, I am fetching Server site Country Array list and Generating dropdown using Vue.js
    Vuejs Code File link
    Vuejs Exec Link
  5.  Performance Comparison(performance may vary from device to device)
    Using Vuejs: Scripting time=626.9ms


    Using Jquery: Scripting time=677.9ms
Happy Coding...

.COM at Rs.999 For 2 years

Location: Gurugram, Haryana, India

Comments

Post a Comment

Popular posts from this blog

Google Apps Script Exception Handling

-
Image
Errors In Computer Programming There are three types of common errors in programming: Syntax Errors Runtime Errors Logical Errors i) Syntax Errors Syntax errors, also called parsing errors , occur at compile time in traditional programming languages and at interpret time in Google Apps Script. For example, the following line causes a syntax error because we used Variable name V caps. function errorTest(){ Var num1=100; } Try to Save ( Ctrl+S ) Error log:  Missing ; before statement. (line 47, file "RegEx") When a syntax error occurs in Google Apps Script, IDE don't allow to save the last changes. ii) Runtime Errors Runtime errors, also called exceptions , occur during execution (after compilation/interpretation). For example, the following line causes a runtime error because here the syntax is correct, but at runtime, it is trying to call a function that does not exist. function errorTest2(){ var test=method(); Logger.log(t...
Read more

Google Apps Script Regular Expressions

-
Image
RegEx A regular expression, also called a regex , is a method for matching text with patterns. For example, a regular expression can describe the pattern of email addresses, URLs, telephone numbers, employee identification numbers, social security numbers, or credit card numbers. What Is a Regular Expression? A sequence of symbols and characters expressing a string or pattern to be searched for within a longer piece of text. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations. Ref Google: For additional instructions and guidelines, see also Guidelines for using regular expressions and RE2 Syntax . Syntax /pattern/modifiers; var patt = /googleAppsScript/i; / googleAppsScript /i  is a regular expression. googleAppsScr...
Read more

Responsive Web Apps using Google Apps Script

-
Image
Hi Apps Script developer's, Google apps Script allows to develop Dynamic and Static Web applications like fetch data from Google Sheet and create dynamic cards, intelligent data entry form, Workflows, Help Desk, etc. When you create Web apps using Google Apps Script, it will  not be responsive . You can make applications responsive using third party framework like Bootstrap , Material design or other HTML responsive framework. In this post I am explaining how to create responsive(Using Bootstrap 4.0) Google Apps Script Web application from scratch *Required Basic HTML & responsive framework knowledge  Go to your Google Drive Open Google Apps Script Editor   Create new blank apps script Project & save it Add 3 more Html files Index.html, JavaScript.html & Stylesheet.html with given code For any Web application it requires 4 main components(I am explaining best practise here, you can add HTML, JS & Stylesheet in to two files if you want) For ...
Read more