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 () {