Vue 3 Vite Starter

A Vue 3 starter template or boilerplate for your new Vue projects using Vite.

Features

• ⚡️ Vue 3, Vite 2, and yarn

• 📦 Components auto importing (unplugin-vue-components)

• 🍍 State Management via Pinia

• 🎨 TailwindCSS and HeadlessUI

• 🌙 Switch Theme (light and dark)

• 😃 Icon Pack Component (unplugin-icons)

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing (unplugin-auto-import)

• 🗂️ Vue Composition Collection (Vueuse)

• 🦾 TypeScript

• Code Styling with Eslint and Prettier

• ⚙️ Unit Testing with Vitest and E2E Testing with Cypress

• 🚀 CI/CD with GitHub Actions

• ☁️ Deploy on Netlify, zero-config

• 🌍 Internationalization with I18n

• 📡 Http request with axios

Preview

WIP

Quick Start

This template requires Node version >=14

• Clone this project to local https://github.com/RSurya99/vue3-vite-starter.git
• Install all dependencies yarn install
• Start development server yarn dev and open http://localhost:3000 in your browser
• Unit test using yarn test:unit and E2E test usingyarn test:e2e
• Build the project using yarn build and use yarn start to start production server

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Deploy on Netlify

There are 2 way to upload to netlify within this project. You can use CI/CD for auto deploy, or deploy it directly to netlify

Using Github Actions to Deploy

• Create new Netlify project and add your repository to it
• Inside Netlify dashboard, go to site settings and copy API ID inside Site Information menu (save it on notepad or anything else)
• Click your profile -> open user settings -> Applications -> Click New access token -> genereate -> and copy the token
• Go to Github profile settings -> Developer Settings -> Personal access token -> Generate new token -> copy it
• Then, go to your github project repository -> Settings -> Secrets -> Actions -> and add 3 new repository secret
  1. NETLIFY_AUTH_TOKEN = YOUR_NETLIFY_PERSONAL_ACCESS_TOKEN
  2. NETLIFY_SITE_ID = YOUR_NETLIFY_PROJECT_API_ID
  3. PERSONAL_TOKEN = YOUR_GITHUB_ACCESS_TOKEN
• Save it, and try to push new commit to your repository (the CI/CD scripts will automatically run, and if there's no error in testing, it will automatically deploy your project to netlify)

Direct Deploy in Netlify

• Go to Netlify dashboard and create new project
• Sync it with your repo and wait a minute for netlify to auto-deploy the project

Notes

Styles

You can find Tailwindcss import in :

/path/to/assets/css/vendor.css

For custom styles, you can add it in :

/path/to/assets/sass/app.css

Theme Changer

We are using Vueuse to toggle DarkMode, you can find it in :

/src/composables/dark.ts

How to use :

<script setup lang="ts">
import { toggleDark } from '@/composables'
</script>
<template>
  <div>
    <button @click="toggleDark()">Toggle Theme</button>
  </div>
</template>

HTTP Request (Axios)

We use axios for HTTP request, because it's more easy to use then javascript fetch() method. To use this you need to create a service and then you can call it in store or component

Example use : services/ApiService.ts

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
})

export default {
  apiGetAllUsers() {
    return instance.get('/users')
  },
}

call apiGetAllUsers in store stores/User.ts

import { defineStore } from 'pinia'
import ApiService from '@/services/ApiService'
import { User } from '../types'

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    users: [] as User[],
  }),
  actions: {
    getAllUser() {
      return ApiService.apiGetAllUsers()
        .then((response) => {
          this.users = response.data
        })
        .catch((error) => {
          throw error
        })
    },
  },
})

Internationalization

Internationalization is a plugin that allows you to switch between languages. this lib in :

/path/to/modules/i18n.ts

To use this plugin, is quite easy, you just need to add new translation on locales (if you want to add another language just create a new file), and then you can import it and use it in component like this:

locales/en.yml

app:
  title: Vue 3 Vite Starter

App.vue

<script setup lang="ts">
const { t } = useI18n()
</script>
<template>
  <h1>{{ t('app.title') }}</h1>
</template>

here are the config in vite.config.js

import VueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        // add vue-i18n for auto importing
        'vue-i18n',
      ],
      dts: 'src/auto-imports.d.ts',
      eslintrc: {
        enabled: true, // Default `false`
      },
    }),
    // vue i18n config here
    // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
    VueI18n({
      runtimeOnly: true,
      compositionOnly: true,
      include: [path.resolve(__dirname, 'locales/**')],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

Icons

This project is using unplugin-icons with unplugin-vue-components for auto importing
You can see collection icon list in : https://icones.js.org/
In this project, prefix is configured to "Icon", here are example use of it :

<IconProviderIconName />

<IconMdiChevronDown />

<IconLogoGoogleIcon />

you can see the config of this in vite.config.js

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      directoryAsNamespace: true,
      dts: 'src/components.d.ts',
    }),
    Icons(),
  ],
})

API Auto Importing

We use unplugin-auto-import for API auto importing, you can also use this to import API in package. Here are the example of configuration :

AutoImport({
  // targets to transform
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/,
    /\.vue\?vue/, // .vue
    /\.md$/, // .md
  ],
  // global imports to register
  imports: [
    // presets
    'vue',
    'vue-router',
    // custom
    {
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]'],
      ],
    },
  ],
  // Generate corresponding .eslintrc-auto-import.json file.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc: {
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },
  // custom resolvers
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ],
})

License

This project is licensed under the MIT license, Copyright (c) 2022 Rafli Surya Pratama. For more information see the LICENSE file.