Skip to content

Commit dbeba63

Browse files
JamesNockJamesNock
committed
Merge branch 'nuxt3'
* nuxt3: Add tailwind Working under nuxt 3 but styling missing Port nuxt 3 basic project in
2 parents 969de9c + ba4722a commit dbeba63

22 files changed

+10510
-14451
lines changed

‎.eslintrc.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎.husky/.gitignore‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.husky/common.sh‎

Whitespace-only changes.

‎.husky/pre-commit‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎app.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<div>
3+
<NuxtRouteAnnouncer />
4+
<Welcome />
5+
</div>
6+
</template>
7+
<script setup lang="ts">
8+
</script>

‎assets/css/main.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎components/NuxtLogo.vue‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎components/SeederGenerator.vue‎

Lines changed: 69 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
hover:bg-pink-400 hover:text-black"
2121
type="submit"
2222
value="Perform the magic!"
23-
@click.prevent="fetch"
23+
@click.prevent="handleSubmit"
2424
/>
2525
</form>
2626
<div v-if="output" class="bg-yellow-300 p-4" @click="copyThis">
@@ -40,66 +40,74 @@
4040
</div>
4141
</div>
4242
</template>
43-
<script>
44-
export default {
45-
data() {
46-
return {
47-
statements: '',
48-
output: '',
49-
errorMsg: '',
50-
fetching: false,
43+
44+
<script setup>
45+
import { ref } from 'vue'
46+
import { useNuxtApp } from '#app'
47+
48+
const statements = ref('')
49+
const output = ref('')
50+
const errorMsg = ref('')
51+
const fetching = ref(false)
52+
53+
const handleSubmit = async () => {
54+
if (!statements.value) {
55+
errorMsg.value = "Please enter statements. e.g.\r\nINSERT INTO content(`id`, `title`, `text`)\r\nVALUES\r\n(1, 'title', 'text'),\r\n(2, 'title', 'text');"
56+
setTimeout(() => {
57+
errorMsg.value = ''
58+
}, 5000)
59+
return
60+
}
61+
62+
output.value = 'Fetching...'
63+
fetching.value = true
64+
errorMsg.value = ''
65+
66+
try {
67+
const formData = new FormData()
68+
formData.append('statements', statements.value)
69+
70+
const { data, error } = await useFetch('https://www.james-nock.co.uk/tools/laravelseedergenerator.php', {
71+
method: 'POST',
72+
body: formData,
73+
})
74+
75+
if (error.value) {
76+
throw error.value
5177
}
52-
},
53-
methods: {
54-
prevent(event) {
55-
event.stopPropagation()
56-
},
57-
async fetch() {
58-
if (!this.statements) {
59-
this.errorMsg = "Please enter statements. e.g.\r\nINSERT INTO content(`id`, `title`, `text`)\r\nVALUES\r\n(1, 'title', 'text'),\r\n(2, 'title', 'text');"
60-
setTimeout(() => {
61-
this.errorMsg = ''
62-
}, 5000)
63-
return
64-
}
65-
this.output = 'Fetching...'
66-
this.fetching = true
67-
this.errorMsg = ''
68-
const formData = new FormData()
69-
formData.append('statements', this.statements)
70-
await this.$axios({
71-
method: 'post',
72-
url: 'https://www.james-nock.co.uk/tools/laravelseedergenerator.php',
73-
data: formData,
74-
headers: { 'Content-Type': 'multipart/form-data' },
75-
})
76-
.then((res) => {
77-
if (!res.data.error) {
78-
const blob = new Blob([res.data]);
79-
const url = window.URL.createObjectURL(blob);
80-
const a = document.createElement('a');
81-
a.href = url;
82-
const filename = this.statements.split(';')[0].split('(')[0].replace(/INSERT\s?INTO\s?/g, '') + 'Seeder.php';
83-
a.setAttribute('download', filename[0].toUpperCase() + filename.slice(1));
84-
document.body.appendChild(a);
85-
a.click();
86-
this.output = 'File downloading...'
87-
setTimeout(() => {
88-
window.URL.revokeObjectURL(url);
89-
document.body.removeChild(a);
90-
this.fetching = false
91-
this.output = ''
92-
}, 0);
93-
} else {
94-
this.output = ''
95-
this.errorMsg = res.data.message
96-
}
97-
this.fetching = false
98-
})
99-
},
100-
copyThis(event) {
101-
this.$nuxt.$emit('copyThis', event.target)
102-
},
103-
},
78+
79+
if (!data.value.error) {
80+
// Create blob from response data
81+
const blob = new Blob([data.value])
82+
const url = window.URL.createObjectURL(blob)
83+
const a = document.createElement('a')
84+
a.href = url
85+
const filename = statements.value.split(';')[0].split('(')[0].replace(/INSERT\s?INTO\s?/g, '') + 'Seeder.php'
86+
a.setAttribute('download', filename[0].toUpperCase() + filename.slice(1))
87+
document.body.appendChild(a)
88+
a.click()
89+
output.value = 'File downloading...'
90+
setTimeout(() => {
91+
window.URL.revokeObjectURL(url)
92+
document.body.removeChild(a)
93+
fetching.value = false
94+
output.value = ''
95+
}, 0)
96+
} else {
97+
output.value = ''
98+
errorMsg.value = data.value.message
99+
}
100+
} catch (error) {
101+
errorMsg.value = 'An error occurred while processing your request.'
102+
output.value = ''
103+
console.error('Error:', error)
104+
} finally {
105+
fetching.value = false
106+
}
107+
}
108+
109+
const copyThis = (event) => {
110+
const { $bus } = useNuxtApp()
111+
$bus.emit('copyThis', event.target)
104112
}
105113
</script>

‎components/Welcome.vue‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -66,46 +66,45 @@
6666
</div>
6767
</div>
6868
</template>
69-
<script>
70-
export default {
71-
data() {
72-
return {
73-
copiedtoclipboard: false,
69+
70+
<script setup>
71+
import { ref, onMounted } from 'vue'
72+
import { useNuxtApp } from '#app'
73+
74+
const copiedtoclipboard = ref(false)
75+
76+
const copyThis = (clickeditem) => {
77+
if (process.client) {
78+
const el = document.createElement('textarea')
79+
el.value = clickeditem.innerText
80+
el.setAttribute('readonly', '')
81+
el.style.position = 'absolute'
82+
el.style.left = '-9999px'
83+
document.body.appendChild(el)
84+
const selected =
85+
document.getSelection().rangeCount > 0
86+
? document.getSelection().getRangeAt(0)
87+
: false
88+
el.select()
89+
document.execCommand('copy')
90+
document.body.removeChild(el)
91+
if (selected) {
92+
document.getSelection().removeAllRanges()
93+
document.getSelection().addRange(selected)
7494
}
75-
},
76-
methods: {
77-
copyThis(clickeditem) {
78-
if (process.client) {
79-
const el = document.createElement('textarea')
80-
el.value = clickeditem.innerText
81-
el.setAttribute('readonly', '')
82-
el.style.position = 'absolute'
83-
el.style.left = '-9999px'
84-
document.body.appendChild(el)
85-
const selected =
86-
document.getSelection().rangeCount > 0
87-
? document.getSelection().getRangeAt(0)
88-
: false
89-
el.select()
90-
document.execCommand('copy')
91-
document.body.removeChild(el)
92-
if (selected) {
93-
document.getSelection().removeAllRanges()
94-
document.getSelection().addRange(selected)
95-
}
96-
clickeditem.classList.add('bg-green-400')
97-
this.copiedtoclipboard = true
98-
setTimeout(() => {
99-
clickeditem.classList.remove('bg-green-400')
100-
this.copiedtoclipboard = false
101-
}, 3000)
102-
}
103-
}
104-
},
105-
created() {
106-
this.$nuxt.$on('copyThis', (clickeditem) => {
107-
this.copyThis(clickeditem);
108-
})
109-
},
95+
clickeditem.classList.add('bg-green-400')
96+
copiedtoclipboard.value = true
97+
setTimeout(() => {
98+
clickeditem.classList.remove('bg-green-400')
99+
copiedtoclipboard.value = false
100+
}, 3000)
101+
}
110102
}
103+
104+
onMounted(() => {
105+
const { $bus } = useNuxtApp()
106+
$bus.on('copyThis', (clickeditem) => {
107+
copyThis(clickeditem)
108+
})
109+
})
111110
</script>

‎eslint.config.mjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// @ts-check
2+
import withNuxt from './.nuxt/eslint.config.mjs'
3+
4+
export default withNuxt(
5+
// Your custom configs here
6+
)

0 commit comments

Comments
 (0)