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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

1507閲覧

Nuxt.js にTypescript の環境構築を行う方法。

takochan1192

総合スコア100

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/08/09 22:46

nuxt.jsの公式サイトのガイドラインをもとに、新しい、プロジェクトを作成しました。Typescript の導入を行い、.tsファイルで定義している変数をvueファイル内で使用できるようにしたいと思っています。
簡単な、validationチェックのコードを作成し、動作確認を行いたいと思っておりましたが、
.ts形式のファイルが読み込めていないようなのです。

【install の手順は下記の通りです。】
yarn create-nuxt-app <project name>

Programming language:Typescript Package manager Yarn UI framework:Vuetify.js Nuxt.js modules:Axios Linst tools:ESLint Testing framework:None Rendering mode:SPA Deployment target:Server Development tools:jsconfig.json

[Typescriptの環境準備]
yarn create した段階で、typescriptを選択していたので、そもそもこのステップは必要ないのではと思ったりもしましたが、公式ガイドに従って環境構築を行いました。

1.yarn add --dev @nuxt/typescript-build @nuxt/types

2.yarn add @nuxt/typescript-runtime

3.yarn add -D @nuxtjs/eslint-config-typescript

3までインストールが完了したのち、 .eslintrc.jsファイルを作成し、
下記のコードを挿入しました。

module.exports = { extends: [ '@nuxtjs/eslint-config-typescript' ] }

package.jsonのファイル内にlintの項目を追加しました。

package.json

1"lint": "eslint --ext .ts,.js,.vue ."

最後にyarn devのコマンドを実行し、無事にnuxt.jsのプロジェクトが
完了できたと思い、localhost:3000で動作も確認しました。
ここにコードを作成しましたが、ここでエラーが起きました。

nuxt.js/validation.vue

1<template> 2 <v-form v-model="valid"> 3 <v-container> 4 <v-row> 5 <v-col 6 cols="12" 7 md="4" 8 > 9 <v-text-field 10 v-model="firstname" 11 :rules="nameRules" 12 :counter="10" 13 label="First name" 14 required 15 ></v-text-field> 16 </v-col> 17 18 <v-col 19 cols="12" 20 md="4" 21 > 22 <v-text-field 23 v-model="lastname" 24 :rules="nameRules" 25 :counter="10" 26 label="Last name" 27 required 28 ></v-text-field> 29 </v-col> 30 31 <v-col 32 cols="12" 33 md="4" 34 > 35 <v-text-field 36 v-model="email" 37 :rules="emailRules" 38 label="E-mail" 39 required 40 ></v-text-field> 41 </v-col> 42 </v-row> 43 </v-container> 44 </v-form> 45</template> 46<script lang="ts"> 47import {Component, Vue} from 'nuxt-property-decorator' 48import {validates} from '~/store/validate' 49 50@Component({}) 51export default class extends Vue{ 52 valid:boolean = false 53 firstname:string ="" 54 lastname:string ="" 55 nameRules = [ 56 validates.required, 57 validates.name_length 58 ] 59 emailRules = [ 60 validates.required, 61 validates.email_validate 62 ] 63 64} 65</script> 66

storeフォルダ内に格納している、validate.tsファイルをvalidation.vueファイル内で呼び出すところで、発生しました。
'~/store/validate'にエラーがメッセージが下記のようなエラーメッセージが表示されました。

Cannot find module '~/store/validate' or its corresponding type declarations.

そもそもvalidateファイルが見つからないということだと思うのですが、
公式サイトの方法にのとって作成したにも関わらず、なぜこうなったのか
理由がわかりません。
最初の段階でつまづいており、非常に困っております。
どなたか、ご教示いただけませんでしょうか?

nuxt.js/validate.ts

1export const validates = { 2 required:(v:string) => !!v||'this is required', 3 name_length:(v:string)=> v.length <= 10 || 'Name must be less than 10 characters', 4 email_validate:(v:string) => /.+@.+/.test(v) || 'E-mail must be valid', 5}

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

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

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

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

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

dameo

2020/08/10 11:15

yarnは使ってないので、npmで同様に作ってみました。 手順に則って、create-nuxt-appしかしてません。 公式の手順が終わり、自分のアプリの作成のためにあなたが作成したファイルをpages/sample.vueとして保存してビルドしたら同様のエラーが出ました。 エラーが出てる箇所はあなたが作成したファイルsample.vueの import {Component, Vue} from 'nuxt-property-decorator' import {validates} from '~/store/validate' です。 別に公式の手順関係ないので、あなたが作成したファイルの↑の意味を教えて下さい。
dameo

2020/08/10 11:31

公式の手順にはクラス表記がまだ対応してないようですね。 手動で対応するには npm install nuxt-property-decorator が必要なようです。 手順はまだですが、入ってれば動くようで、デコレータも処理されました。 https://github.com/nuxt-community/nuxt-property-decorator ただ、validatesは自前のようなので、あなたが ~/store/validate にあると思っているvalidatesが何なのか説明しない限り、先に進むことはありません。
takochan1192

2020/08/10 22:38

説明不足で大変失礼いたしました。 何度か自分で試したところ、なんとかできました。 公式ガイドに記載されていた、手順は一切いらず、yarn create nuxt-app <ファイル名> ここで、Typescriptを選択すると必要なモジュール関係は全てインストールされるようです。 逆に、余計な手順を踏んでしまうとエラーが起こってしまうということがわかりました。 また、nuxt-property-decoratorはこれは、追加で入れているものでした。 大変失礼いたしました。 ご回答ありがとうございました。
guest

回答1

0

自己解決

nuxtをインストールするときに、Typescriptを選択すると、
全てTypescriptに必要なモジュールなどはインストールされるようです。
Nuxt.tsの公式サイトに記載されている手順は一切必要ないようです。
もし、いれてしまうとエラーが起こってしまう可能性があります。

投稿2020/08/10 22:40

takochan1192

総合スコア100

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問