Vue 3 with Vite on Homestead

Hi, I am trying to make a vue 3 app with vite on Homestead but I cant get it to work. it all installs ok and when I run: npm run dev, it says i have it running at Local: http://localhost:5173/ I added the site to the homestead yaml file and the windows hosts file as normal pointing to my vue-projects folder but when I go to my http://vueproject.test/index.html I get a blank screen with the following error in the console: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

I have it installed in a folder called vue-project mapped like so:

map: vueproject.test to: /home/vagrant/laravel_projects/vue-project

Anybody got any idea's?

ecae7an0s

2 years ago

Level 1

Any solution on it?

ImaniLeemans

2 years ago

Level 1

Hi @randy_91 ,

I previously had a similar problem. Where my 'vue' module was not found. However, I added an alias to my vite configuration:

[vite.config.js] resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js', }, },

Since the { createApp } cannot be imported from 'vue' itself for some reason. This solved that problem for me. After setting this alias, the code in my main.js / app.js remained the same and allowed my to properly load the module.

[main.js] import { createApp } from 'vue'

After this you can utilize the createApp functionality and mount your app! Hope this helps

Please or to participate in this conversation.