Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
vue3-ts-vuetify
Advanced tools
Template for Vue 3, TypeScript and Vuetify.
Use degit to install this template.
# Clone the template
npx degit manuelgarciacr/vue3-ts-vuetify project-name
The steps to create this template were:
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 3 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.