logue / vite-vue2-vuetify-ts-starter Goto Github PK

Hi logue,

I have noticed that a fresh start of the template in vscode doesn't seem to resolve components properly, as seen in the screenshot below, the component is marked red.

I have made a few changes in the code above, by removing the import for component, but the issue persists even when the import is in place. Let me know if you need any additional info.

Best regards,
Ju Ping

Hi logue,

According to this link: kaorun343/vue-property-decorator#303

We can make vue-property-decorator infer prop type from TypeScript types.

Why is this significant:

1. First, a dry code is a good code, and declaring props like this: @Prop({type: Boolean}) readonly trigger: boolean is not dry.
2. One can easily forget that explicit prop type declaration is required, leading to unexpected behavior, e.g. a Boolean prop defaults to false but if not explicitly declared, it will result in empty string "" instead of false

Hopefully this gets implemented.

Best regards,
Ju Ping

@logue you should consider wrapping the text We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue. in the index.html file in a <noscript></noscript> tag instead of the <div id="app"></div>

So I've been using this template for a simple hobby project that I wanted to deploy with Vercel, but I get this typescript error that I don't get locally when using the build command.

Cloning completed: 704.88ms
--
09:11:01.022 | Looking up build cache...
09:11:01.489 | Build Cache not found
09:11:01.792 | Running "vercel build"
09:11:02.440 | Vercel CLI 28.2.0
09:11:02.740 | Warning: Detected "engines": { "node": ">=16.17.0" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version
09:11:02.742 | Running "install" command: `yarn`...
09:11:03.684 | ➤ YN0000: ┌ Resolution step
09:11:03.902 | ➤ YN0002: │ stylelint-config-recommended-scss@npm:7.0.0 [8b30a] doesn't provide postcss (p8f459), requested by postcss-scss
09:11:03.902 | ➤ YN0002: │ vite-vue2-vuetify-ts-starter@workspace:. doesn't provide rollup (p5218d), requested by rollup-plugin-visualizer
09:11:03.903 | ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
09:11:03.910 | ➤ YN0000: └ Completed in 0s 225ms
09:11:03.977 | ➤ YN0000: ┌ Fetch step
09:11:55.341 | ➤ YN0013: │ 23 packages were already cached, 676 had to be fetched
09:11:55.345 | ➤ YN0000: └ Completed in 51s 367ms
09:11:55.415 | ➤ YN0000: ┌ Link step
09:12:03.722 | ➤ YN0007: │ vue-demi@npm:0.13.6 [40cc5] must be built because it never has been before or the last one failed
09:12:03.723 | ➤ YN0007: │ esbuild@npm:0.14.49 must be built because it never has been before or the last one failed
09:12:04.028 | ➤ YN0000: └ Completed in 8s 613ms
09:12:04.109 | ➤ YN0000: Done with warnings in 1m 1s
09:12:11.181 | src/components/HelloWorld.vue(136,18): error TS2307: Cannot find module '@/Meta' or its corresponding type declarations.
09:12:11.217 | Error! Command "yarn build" exited with 2

I'm guessing this has to do with the aliases defined in tsconfig.ts but I can't figure out what could be wrong with this.

Hi logue,

As components grow in quantity, repetitive imports of decorators such as Component and Prop from vue-property-decorator becomes bulky. In this template, auto import of components is achieved by components.d.ts which declares component globally. Is there something similar to this that can be done to remove the imports of decorators as well?

Best regards,
Ju Ping

Any ideas on how to use custom icons?
The documentation under icons/fonts for Vuetify doesn't seem to work with this example

Vuetify Icons/Fonts Docs

`
import Vue from "vue";
import { UserVuetifyPreset } from "vuetify";
import Vuetify from "vuetify/lib";
import "@mdi/font/css/materialdesignicons.css";
import { VuetifyIcons } from "vuetify/types/services/icons";

Vue.use(Vuetify);

export const options: Partial = {
theme: {
themes: {
light: {
primary: "#0F62FE",
secondary: "#393939",
accent: "#0F62FE",
error: "#DA1E28",
info: "#0443CE",
success: "#198038",
warning: "#F1C21B",
warningOrange: "#FC832C",
},
},
},
icons: {
values: vuetifyToCarbon, // custom icons here
iconfont: "mdi",
},
};

export default new Vuetify(options);
`

Specifically trying to use carbon icons - "@carbon/icons-vue": "^10.40.0"

This template worked fine for our corporation for months, a huge thanks from me and the team! However, we have now come to a stage where we need to develop functionalities independently. I have heard and dug into this term "module federation" as a paradigm for frontend micro-service, and I was wondering if there's any possibility that an integration of the "vite-plugin-federation" library into this framework is possible.

TLDR: Any suggestion or possible upgrades in the future such that frontend microservice paradigm is possible?

Best regards,
JU PING