search

vuetifyjs / vue-cli-plugins

🔌 A collection of Vuetify plugins for Vue CLI
https://vuetifyjs.com/en/getting-started/quick-start#vue-cli-3
Other
428 stars 113 forks source link

feat(preset): Add support for typescript projects #177

Closed adambullmer closed 3 years ago

adambullmer commented 4 years ago

Adds the ability to look for the vuetify plugin file in typescript projects.

Following normal app scaffolding procedures, you will install official vue plugins first, like typescript, and then later install vuetify and vuetify presets.

$ vue create app-name

Vue CLI v4.3.1
? Generate project in current directory? Yes

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

$ vue add vuetify

📦  Installing vue-cli-plugin-vuetify...

✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) No
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Select locale English

🚀  Invoking generator for vue-cli-plugin-vuetify...
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

$ ls src/plugins/
vuetify.ts

After completion hooks are run, the src/plugins/vuetify.ts file is created.

Afterwards, creating a new vuetify preset with a generator that injects itself will fail due to hard coded .js file extension for the preset. My workaround right now is to rename the file before and after adding the preset, but this gets interrupted when trying to make a vue preset or any scripting to automate the process of adding vuetify and a vuetify preset to a project.

$ vue add vuetify-preset-basil

 📦  Installing vue-cli-plugin-vuetify-preset-basil...

✔  Successfully installed plugin: vue-cli-plugin-vuetify-preset-basil

🚀  Invoking generator for vue-cli-plugin-vuetify-preset-basil...
Unable to locate `vuetify.js` plugin file in `src/plugins`.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify-preset-basil
johnleider commented 3 years ago

This Pull Request is being closed due to inactivity.

If you have any additional questions, please reach out to us in our Discord community.