Skip to content

Vue 3 project with Typescript, Pinia, Tailwind CSS, i18n, SVG components, Router and FontAwesome6 ready to develop or deploy.

Notifications You must be signed in to change notification settings

frankykubo/vue3-base-scaffold

Repository files navigation

css-in-readme

Vue3 ready-to-run and ready-to-develop app packed with useful tools based on @vue/cli (webpack).

Features

Typescript

Creating this scaffold, important thing for me was to use typescript. Project comes also with .eslintrc.js, which can help you produce some good coding habits to produce better quality code.

Pinia

As a project global store, this scaffolding use Pinia. I have a project with Vue3, typescript and Vuex, but Vuex will be deprecated in the near future and if you want to configure it to strictly use types, it is impractical and slowes down work. That is why I've chosen Pinia, which support types by default and it is working really good.

https://pinia.vuejs.org/

Tailwind CSS

If you don't know Tailwind, you surely will and you will like it. Class-based lightweight styling I fell love with on the first glance. Really speeds up your styling. Hot reaload also works. Still, if you do want to use classic css/sass styles, you can inside components.

Custom tailwind styles

You can create custom Tailwind styles in @/src/assets/styles/tailwind.scss file, see tailwind docs. Tailwind configuration is editable in root folder's tailwind.config.js file.

https://tailwindcss.com/

i18n

Multi-language websites are nothing special these days. That's why I included i18n package. Also, there are separate folder for each language component and language as particular. Examples can be found in lang folder.

If you are using JetBrains IDEs, I recommend using plugin Easy i18n, which works perfectly for this structure and you can see translations as a table and also you can edit it, create new translations.

https://github.com/intlify/vue-i18n-next

SVG Components

Basic thing, but there is no information about it in official documentation. It is included in this scaffolding, as well as in-code example.

Font awesome 6

If you dont want to bother yourself with svg icons, there is option named font awesome. Easy-to-use, free alternative for a great number of icons you can find on their website. You can include new icons in @/helpers/bootstrap/icons.ts, where you need to import it and then add to export default function.

https://fontawesome.com/icons

Router with separate route index

Bothered with IDE not recommending any routes, when you want to use <router-link> with name attribute? Just include { route_index } from @/router/routes.ts and you have fully typed object containing routes and their details. Default vue-router with History API is used in this project.

Examples

Project comes with basic structure. When you open App.vue or HelloWorld.vue, you will see everything written above in practical use.

Docker

You can run this project inside a docker container. Simply create an image by running cmd/bash command: docker-compose up --build And your container is ready to go. Hot reloading works as well.

Project setup

npm install -g @vue/cli
npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.