質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Q&A

0回答

878閲覧

GAS(Google Apps Script)でVuetifyが機能しない?のかもわからない。

YuttyaDX

総合スコア25

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

0グッド

1クリップ

投稿2021/12/16 12:43

前提・実現したいこと

【デモ環境あり】GASを使って掲示板を作ってみた話
上記のリンクを参考にして、Webアプリケーションを作っていて、Yahoo知識袋みたいな質問投稿サイトを作りたい。

発生している問題

プログラムを組んでプレビューすると、Vuetifyの機能(<v-app><v-container>など)の機能のみが機能しない。

該当のソースコード

error.html

1<html> 2<head> 3 <base target="_top"> 4 <meta charset="utf-8"> 5 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 6 <!--<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">--> 7 <?!= HtmlService.createHtmlOutputFromFile('vuetify.min.css').getContent(); ?> 8 <title>SNSBoard</title> 9</head> 10<body> 11 <p>errorページが表示されています</p> 12 <div>hogehoge</div> 13 <div id="app"> 14 <v-app> 15 <vue-toollist></vue-toollist> 16 <v-container grid-list-md> 17 <v-layout row wrap> 18 <v-flex xs12> 19 <p>ただいま、更新処理中です。</p> 20 <p>一定時間後、再度アクセスを行なってください。</p> 21 <v-flex> 22 <v-layout> 23 24 </v-app> 25 </div> 26</body> 27</html> 28 29<?!= HtmlService.createHtmlOutputFromFile('vue.js').getContent(); ?> 30<?!= HtmlService.createHtmlOutputFromFile('vuetify.js').getContent(); ?> 31 32<?!= HtmlService.createHtmlOutputFromFile('vue_toolList').getContent(); ?> 33 34<script> 35const app = new Vue 36({ 37 el : "#app" 38 ,data() 39 { 40 return{ 41 } 42 } 43 ,methods: 44 { 45 } 46 ,mounted() 47 { 48 } 49 ,components: 50 { 51 'vue-toollist' : vue_toolList 52 } 53}) 54</script>

外部ファイルのVue.jsやVuetify.js, Vuetify.min.cssなどは他のURLからのアクセスの回数を減らすため、ローカルのファイルにコードを丸コピしています。
詳しくはこちらを見てください。
参考にしたソースコード

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

Vue.js : v2.6.14

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問