Boilerplate: Vue3 + Vite
Github repository: https://github.com/zrfvnzr/boilerplates_frontend/tree/hello_world_vue3_vite
Created a Vue3 + Vite Project
Related: Getting started with Vue 3 + Vite
Delete the
HelloWorld
componentGo to
/src/components
and the delete the fileHelloWorld.vue
Unlink and delete style.css
In
/src/main.js
, delete the lineimport './style.css'
Now in
/src
, delete thestyle.css
fileIn
/src/main.js
, change the createApp lines to:const app = createApp(App) app.mount('#app')
This allows easier use of
app.mount
andapp.use
linesPreparing the Options API syntax
Related: https://markus.oberlehner.net/blog/vue-3-composition-api-vs-options-api/In
/src/App.vue
, remove thesetup
keyword from the<script>
tag.Also delete the
import HelloWorld from './components/HelloWorld.vue'
line.
Prepare thedata
andmethods
options:
<script>
export default {
data() {
return {
// variables go here
}
},
methods: {
// methods go here
}
}
</script>
In
/src/App.vue's
<template>
, delete initial code and leave a single main<div>
.Also, delete the initial code in
<style>.
Additionally, we can remove thescoped
attribute to make the styles inApp.vue
apply to all pages and components.