[Vuejs]-Page transitions for plain html sites?

by

0👍

Ok, no, you can use even Vue Cli to make any vue aplication and to be deployed on any type of web server, You only need a local computer to make all the bunble things (transpilation, minify js, preprocessCSS, etc) and when you need to deploy the app, the only thing to do its run the production comands on your local development computer (like "npm run prod") and upload only the reday-production processed files.

Vue works in two ways, Runtime + Compiler or Runtime only:

Because of this, vue page elements do not seem to work in an environment like this (, , etc.).

The file components in Vue must to be ‘compiled’ with a Vue Loader compiler and for this to be acomplished you need to use some module builder like webpack.
Is explained here in the oficcial documentation

But that does not mean that you need to use a module builder to make a site with Vue usign the custom components. If you do not want to use Webpack you can load in your page the Runtime + Compiler version of Vue and the compiler will "compile" all the non DOM tags to a Vue component, check the snippet

var app = new Vue({
  el: '#app',
  data: {
    article: 'first'
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<section id="app">
    <header>
    </header>
    <transition appear name="fade" mode="out-in">
      <article key="first" v-if="article === 'first'" @click="article = 'second'">
        <h1>Title of the Page</h1>
        <p> some content (click me to change the content)..<p>
      </article>
      <article v-else @click="article = 'first'" key="second">
        <h1>Another Title</h1>
        <p> some content ..<p>
      </article>
    </transition>
</section>

Leave a comment