
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
vue3-ts-vuetify
Advanced tools
Template for Vue 3, TypeScript and Vuetify.
vue create project-name
Vue CLI v5.0.4
(*) Babel
(*) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
(*) Unit Testing
(*) E2E Testing
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config
// .eslintrc.js
module.exports = {
...,
env: {
...,
'vue/setup-compiler-macros': true
},
...
}
vue add vuetify
Choose a preset: Vuetify 3 Preview (Vuetify 3)
? Would you like to install Vuetify 3 nightly build? (WARNING: Nightly builds are intended for development testing and may include bugs or other issues.) Yes
// src/shims-vuetify.d.ts
declare module 'vuetify'
declare module 'vuetify/lib/components'
declare module 'vuetify/lib/directives'
declare module 'vuetify/lib/util/colors'
declare module 'vuetify/lib/styles/generic'
...
// src/plugins/vuetify.ts
...
import colors from 'vuetify/lib/util/colors'
const light = {
dark: false,
colors: {
background: '#FFFFFF',
surface: '#FFFFFF',
primary: colors.deepPurple.base,
'primary-lighten-4': colors.deepPurple.lighten4,
secondary: colors.teal.base,
error: colors.red.base,
info: colors.cyan.base,
success: colors.green.base,
warning: colors.amber.base,
}
}
export default createVuetify({
theme: {
options: {
customProperties: true,
},
variations: {
colors: ['primary'],
lighten: 2,
darken: 2,
},
defaultTheme: 'light',
themes: {
light,
dark: {
dark: true,
colors: {
primary: colors.red.darken1, // #E53935
secondary: colors.red.lighten4, // #FFCDD2
accent: colors.indigo.base, // #3F51B5
}
},
...
},
...
},
...
})
// tsconfig.json
{
...
"compilerOptions": {
...
"types": [
...
"vuetify",
]
}
}
// src/App.vue
<template>
<v-app>
<v-main>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view />
</v-main>
</v-app>
</template>
<style lang="scss">
nav {
padding: 30px;
text-align: center;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
src/components/GroupCard.vue
Added to:
src/components/HelloWorld.vue
FAQs
Template for Vue 3, TypeScript and Vuetify
The npm package vue3-ts-vuetify receives a total of 2 weekly downloads. As such, vue3-ts-vuetify popularity was classified as not popular.
We found that vue3-ts-vuetify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.