```vue
<template>
  <div>
    <h1 class="title">Primary Languages</h1>

    <div class="text-right mb-3">
      <a-button type="primary" @click="openAddModal">
        Add Primary Language
      </a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="primaryLanguages"
      :loading="loading"
      :row-key="record => record.id"
    >
      <template slot="actions" slot-scope="text, record">
        <a-space>
          <a-button type="link" @click="openEditModal(record)">
            Edit
          </a-button>

          <a-popconfirm
            title="Are you sure you want to delete this primary language?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="deletePrimaryLanguage(record.id)"
          >
            <a-button type="link" danger>
              Delete
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>

    <a-modal
      :title="editingId ? 'Edit Primary Language' : 'Add Primary Language'"
      :visible="modalVisible"
      :confirm-loading="saving"
      @ok="savePrimaryLanguage"
      @cancel="closeModal"
    >
      <a-form :form="form">
        <a-form-item label="Name">
          <a-input
            v-decorator="[
              'name',
              {
                rules: [
                  {
                    required: true,
                    message: 'Please enter a primary language.',
                  },
                ],
              },
            ]"
            placeholder="Enter primary language"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  layout: 'admin',

  head() {
    return {
      title: 'Admin - Primary Languages',
    }
  },

  data() {
    return {
      primaryLanguages: [],
      loading: false,
      saving: false,
      modalVisible: false,
      editingId: null,

      form: this.$form.createForm(this),

      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Actions',
          key: 'actions',
          scopedSlots: {
            customRender: 'actions',
          },
        },
      ],
    }
  },

  mounted() {
    this.getPrimaryLanguages()
  },

  methods: {
    async getPrimaryLanguages() {
      this.loading = true

      try {
        const response = await this.$axios.get('/primary-languages')
        this.primaryLanguages = response.data
      } catch (error) {
        this.$message.error('Unable to load primary languages.')
      } finally {
        this.loading = false
      }
    },

    openAddModal() {
      this.editingId = null
      this.form.resetFields()
      this.modalVisible = true
    },

    openEditModal(record) {
      this.editingId = record.id
      this.form.resetFields()

      this.$nextTick(() => {
        this.form.setFieldsValue({
          name: record.name,
        })
      })

      this.modalVisible = true
    },

    closeModal() {
      this.modalVisible = false
      this.editingId = null
      this.form.resetFields()
    },

    async savePrimaryLanguage() {
      try {
        const values = await new Promise((resolve, reject) => {
          this.form.validateFields((errors, values) => {
            if (errors) {
              reject(errors)
              return
            }

            resolve(values)
          })
        })

        this.saving = true

        if (this.editingId) {
          await this.$axios.put(
            `/admin/primary-languages/${this.editingId}`,
            values
          )

          this.$message.success('Primary language updated successfully.')
        } else {
          await this.$axios.post('/admin/primary-languages', values)

          this.$message.success('Primary language created successfully.')
        }

        this.closeModal()
        await this.getPrimaryLanguages()
      } catch (error) {
        if (error && error.response) {
          const message =
            error.response.data.message ||
            'Unable to save primary language.'

          this.$message.error(message)
        }
      } finally {
        this.saving = false
      }
    },

    async deletePrimaryLanguage(id) {
      try {
        await this.$axios.delete(`/admin/primary-languages/${id}`)

        this.$message.success('Primary language deleted successfully.')

        await this.getPrimaryLanguages()
      } catch (error) {
        const message =
          error.response &&
          error.response.data &&
          error.response.data.message
            ? error.response.data.message
            : 'Unable to delete primary language.'

        this.$message.error(message)
      }
    },
  },
}
</script>
```