nocodb/packages/nc-gui-v2/pages/projects/create.vue

<template>
  <NuxtLayout>
    <div class="main  justify-center d-flex mx-auto" style="min-height: 600px;overflow: auto">
      <v-form ref="form" v-model="valid" @submit.prevent="createProject">
        <v-card style="width:530px;margin-top: 100px" class="mx-auto">

          <!-- Create Project -->
          <v-container class="pb-10 px-12" style="padding-top: 43px !important;">
            <h1 class="mt-4 mb-4 text-center">
              <!--            {{ $t('activity.createProject') }}-->
              Create Project
            </h1>
            <div class="mx-auto" style="width:350px">
              <!-- label="Enter Project Name" -->
              <!-- rule text: Required -->
              <v-text-field
                v-model="name"
                class="nc-metadb-project-name"
                label="Project name"
              />
              <!--                :rules="titleValidationRule"-->
            </div>
            <div class="text-center">
              <v-btn
                class="mt-3"
                large
                :loading="loading"
                color="primary"
                @click="createProject"
              >
                <v-icon class="mr-1 mt-n1">
                  mdi-rocket-launch-outline
                </v-icon>
                <!-- Create -->
<!--                <span class="mr-1">{{ // $t("general.create") }}</span>-->
                <span class="mr-1"> Create project </span>
              </v-btn>
            </div>
          </v-container>
        </v-card>
      </v-form>
    </div>
  </NuxtLayout>
</template>

<script lang="ts" setup>

import { useNuxtApp, useRouter } from "#app";
import { ref } from "vue";

const name = ref('');
const loading = ref(false);
const valid = ref(false);

const { $api } = useNuxtApp();
const $router = useRouter();
const {user} = useUser()


const titleValidationRule = [
  v => !!v || "Title is required",
  v => v.length <= 50 || "Project name exceeds 50 characters"
];

const createProject = async () => {
  loading.value = true;
  try {

    const result = (await $api.project.create({
      title: name.value
    }));

    await $router.push( `/dashboard/${result.id}`);
  } catch (e) {
    // todo: toast
    // this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
  }
  loading.value = false;

};

</script>

<style scoped>
/deep/ label {
  font-size: .75rem;
}

.wrapper {
  border: 2px solid var(--v-backgroundColor-base);
  border-radius: 4px;
}

.main {
  height: calc(100vh - 48px)
}
</style>