Home

Awesome

Vite + Vue 2 + TypeScript + Vuetify

<p align="center"> <img src="https://user-images.githubusercontent.com/480173/157433906-7f7910d4-6430-49f4-857a-044945e71360.png" alt="logo" width="300" height="300" /> </p>

⚠ Important Notice: Vue 2 will reach End of Life (EOL) on December 31st, 2023. For this reason, we do not recommend using this template for new projects. See Vue 2 LTS, EOL & Extended Support.

Vuetify3 version is here.

This is a starter project that uses Vuetify as the UI framework.

Description

This template is for using Vue2 with TypeScript in Vite. Includes vue-router and Vuex.

In addition, ESLint, Stylelint, and Prettier are also included and are set to be executed automatically at runtime and commit. (Since these settings are set strictly, please relax yourself.)

Also, when the development server is executed, it is checked in real time by vite-plugin-checker.

Vitest is included in the program for testing.

First define VITE_APP_TITLE in your .env file.

Known issue

vue-tsc outputs an error with v-checkbox. (Because of the specification to write v-model and value together)

If you encounter this kind of trouble, set vueTsc: false in vite-plugin-checker in vite.config.ts and remove vue-tsc --noEmit from the build command in package.json.

Composition API

With the standard support for Composition API in vue 2.7, the default format is composition api.

vue-property-decorator has been dropped since 0.9.1. Please install manually if necessary.

Teleport

Vue3 adds a mechanism called Teleport, which allows you to install vue components anywhere. This starter template is for vue2, but you can do the same with @logue/vue2-helpers/vue2-teleport.

Teleport JSON-LD Example

If you want to include JSON-LD, enter as follows.

<template>
  <div class="container">
    ... Some Content
    <teleport to="head">
      <component :is="'script'" type="application/ld+json" v-text="jsonLd" />
    </teleport>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const jsonLd = ref(
      JSON.stringfy({
        '@schema': 'https://json.schemastore.org/jsonld.json',
        '@context': 'http://schema.org',
        '@type': 'WebSite',
        name: 'Vite Vue2 Vuetify TypeScript Startar',
        url: 'https://github.com/logue/vite-vue2-vuetify-ts-starter',
        description: 'Vite Vue2 Vuetify TypeScript Demo Page',
      })
    );

    return {
      jsonLd,
    };
  },
});
</script>

JSON-LD is literally a script, so it can't be embedded directly, so it's a roundabout thing like this, but simple things like meta tags are reflected by simply inserting a tag.

⚠ Notice: <component :is="'script'" ... /> becomes <component :as="'script'" ... /> in Vue3.

Vue i18n

If you want to use vue-i18n, please install intlify-unplugin-vue-i18n and call the instance with useI18n().

In addition, the conventional method using $t() written in non composition-api can be used as it is.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

And use Volar Takeover Mode for better performance.

Commands

It is designed to be close to create-vue commands.

CommandDescription
devStart devserver.
cleanClear devserver cache.
type-checkCheck vue markup.
lintRun ESLint and prettier.
lint:styleRun Stylelint.
testRun vitest
test:unitRun Unit test
coverageOutput Coverage Report.
buildBuild for production.
build:analyzeExecute Bundle Analyzer
build:cleanClear production build files.
build-onlyBuild for production without checking.
previewRun the program generated by the production build.

⚠ Notice: Be sure to use build-only as the build command for auto-deploying to Github Pages, Vercel, CloudFlare pages, etc. build is for checking whether the build passes locally, and an error occurs because it is executed without Meta.ts being created.

Migrate from VueCli

It also works when migrating from VueCLI.

However, when importing a stylesheet with @import, it cannot be specified from the library directory. Must be specified from ./node_modules/.

Troubleshooting

When adding or deleting files, an error may occur and even if the error is corrected, it may not be reflected in devserver. In that case, stop devserver and delete all the files in the node_modules/.vite directory. You can also run it with the clean command.

Due to yarn issues, it may not work properly if the path contains non-ASCII characters (such as 日本語 or 한국어, 中文 etc.).

From 0.7.4, the default project type is module. If you find a plugin that doesn't work, remove "type": "module" from package.json.

It will not work properly if you are using Node v21.0.0. Please upgrade to 21.1.0 or later.

Checklist

When you use this template, try follow the checklist to update your info properly

See Also