Vue,jsで外部ライブラリを取り込んで表示したい

Vue.jsのライブラリvue-qriouslyを用いてHello World!のQRコードを表示しようとしていますが、実行したところ真っ白な画面になってしまいます。

ブラウザのconsoleを確認したところ、import Vue from 'vue'の箇所でUncaught SyntaxError: Unexpected identifierとなってしまいます。

以下の手順通りに実装しましたが上手く動きません。
https://github.com/theomessin/vue-qriously

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <style type="text/css">
7  </style>
8  <body>
9    <qriously value="Hello World!" :size="200" />
10  </body>
11  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
12  <script src="https://cdn.jsdelivr.net/npm/vue-qriously@1.1.1/dist/vue-qriously.min.js"></script>
13  <script type="text/javascript">
14    import Vue from 'vue'
15    import VueQriously from 'vue-qriously'
16    Vue.use(VueQriously)
17  </script>
18</html>

import Vue〜の実装に誤りがあるかと思います。
お手数ですがご教示していただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

(import使えない)ブラウザなら

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <style type="text/css">
7  </style>
8  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
9  <script src="https://cdn.jsdelivr.net/npm/vue-qriously@1.1.1/dist/vue-qriously.min.js"></script>
10  <body>
11  <div id="app">
12    <qriously value="Hello World!" :size="200" />
13  </div>
14  </body>
15  <script type="text/javascript">
16    var app = new Vue({
17      el: '#app',
18    })
19  </script>
20</html>