Vuetify with TypeScript

README.md

Vuetify with TypeScript

The following changes to the standard setup of the vuetify template will allow you to use typescript instead of babel or just plain javascript.

WORK IN PROGRESS

Additional changes have to be made to vuetify in order to get this running, namely the vuetify typescript declarations. I am currently working on that. Patience is a virtue.

build-slash-vue-loader.conf.js

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap
const merge = require('webpack-merge')


module.exports = {
  loaders: merge({ts: 'ts-loader'}, utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  })),
  cssSourceMap: sourceMapEnabled,
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

build-slash-webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.ts'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'vuetify/components': 'vuetify/es5/components/',
      // 'vuetify$': 'vuetify/es5/components/',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

sfc.d.ts

declare module "*.vue" {
  import Vue from 'vue';
  export default Vue;
}

Found this on a quick search and not sure where to update these files .. would you be able to point me in the right direction? Were you able to get this to work correctly?

If you generated your project without the vue/cli 3 you possibly have a "build" folder, next to the src folder. In this folder you can edit build/webpack.base.conf.js for instance (replace -slash- with / ;) )