search

andrefelipe / vite-php-setup

Example on how to run Vite on traditional PHP sites
https://github.com/vitejs/vite
358 stars 52 forks source link

Mount components within #app #4

Closed merijnponzo closed 3 years ago

merijnponzo commented 3 years ago

Hi there, great setup

Is it possible to compile the vue components just within #app? Respecting all php content within #app

As within my mix setup, or webpack with vue2 this was possible. It should be possible with vue3 as well.

https://laracasts.com/series/whats-new-in-vue-3/episodes/14

andrefelipe commented 3 years ago

Yes, it's fine.

I used to do it myself, but not every site is safe to do so. Some output a javascript inline (had Vimeo oEmbed doing that) so that will break your Vue app. It doesn't allow to output scripts within the #app container.

Also, I was concerned about performance, didn't test it, but looked bad to input the entire HTML body into Vue just for a component or other.

merijnponzo commented 3 years ago

hi, So 

<div id="#app">
<h1>Title</h1>
<Hello-World>Vue component</Hello-World>

is giving performance issues you say? And how do you get this working with Vite and vue3. If i mount my createApp to #app everything within #app is replaced.

For me it's a bit unclear what's the difference between runtime / compiler / runtime + compiler. This has more todo with the general vue3 / vite documentation then your boilerplate but maybe you can help me out here.

// required for in-browser template compilation
  // https://v3.vuejs.org/guide/installation.html#with-a-bundler
  resolve: {
    alias: {
      vue: "vue/dist/vue.esm-bundler.js",
    },
  },

thanks