diff --git a/packages/@vue/cli-ui/apollo-server/connectors/projects.js b/packages/@vue/cli-ui/apollo-server/connectors/projects.js index ee76903d88..0c685d9c64 100644 --- a/packages/@vue/cli-ui/apollo-server/connectors/projects.js +++ b/packages/@vue/cli-ui/apollo-server/connectors/projects.js @@ -272,7 +272,7 @@ async function create (input, context) { creator.context = targetDir const inCurrent = input.folder === '.' - const name = creator.name = (inCurrent ? path.relative('../', process.cwd()) : input.folder).toLowerCase() + const name = creator.name = (inCurrent ? path.relative('../', process.cwd()) : input.folder) // Answers const answers = prompts.getAnswers() diff --git a/packages/@vue/cli-ui/package.json b/packages/@vue/cli-ui/package.json index 495e543a2a..edfbbc96a0 100644 --- a/packages/@vue/cli-ui/package.json +++ b/packages/@vue/cli-ui/package.json @@ -92,6 +92,7 @@ "stylus": "^0.54.5", "stylus-loader": "^5.0.0", "subscriptions-transport-ws": "^0.9.18", + "validate-npm-package-name": "^3.0.0", "vue": "^2.6.12", "vue-apollo": "^3.0.7", "vue-cli-plugin-apollo": "^0.22.2", diff --git a/packages/@vue/cli-ui/src/components/project-create/ProjectCreate.vue b/packages/@vue/cli-ui/src/components/project-create/ProjectCreate.vue index 801bf3ff13..65e4fe6411 100644 --- a/packages/@vue/cli-ui/src/components/project-create/ProjectCreate.vue +++ b/packages/@vue/cli-ui/src/components/project-create/ProjectCreate.vue @@ -55,7 +55,10 @@ class="vue-ui-text danger banner" > - {{ $t('org.vue.views.project-create.tabs.details.form.folder.folder-name-invalid') }} + + {{ $t('org.vue.views.project-create.tabs.details.form.folder.folder-name-invalid') }}: + {{ folderNameValidationMessage }} + import Prompts from '@/mixins/Prompts' -import { isValidName } from '@/util/folders' +import validateNpmPackageName from 'validate-npm-package-name' import debounce from 'lodash.debounce' import CWD from '@/graphql/cwd/cwd.gql' @@ -534,8 +537,21 @@ export default { }, computed: { + folderNameValidationResult () { + return validateNpmPackageName(this.formData.folder) + }, + folderNameValid () { - return isValidName(this.formData.folder) + return this.folderNameValidationResult.validForNewPackages + }, + + folderNameValidationMessage () { + const messages = [ + ...(this.folderNameValidationResult.errors || []), + ...(this.folderNameValidationResult.warnings || []) + ] + + return messages[0] }, detailsValid () {