Can we make vue.js application without .vue extension component and webpack?

by

As stated in this jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , you have no obligation to use webpack or .vue files.

The code below is not from me and all credit goes to this jsFiddle creator:

Create an index.html file:

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="/js/Home.js"></script>
<script src="/js/Foo.js"></script>
<script src="/js/router.js"></script>
<script src="/js/index.js"></script>

<div id="app">
  <router-link to="https://stackoverflow.com/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-view></router-view>
</div>

Home.js

const Home = { template: '<div>Home</div>' }

Foo.js

const Foo = { template: '<div>Foo</div>' }

router.js

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: "https://stackoverflow.com/", component: Home },
    { path: '/foo', component: Foo }
  ]
})

index.js 

new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})

Appreciate the framework…

Just a sidenote: .vue files are really awesome, you should definitely try them if not using them is not a requirement

More Related Contents:

  1. How to add external JS scripts to VueJS Components?
  2. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  3. Is it possible to emit from mounted in Vuejs?
  4. How to make dynamic routes on the vue router?
  5. Vuejs: Event on route change
  6. Vuex – Computed property “name” was assigned to but it has no setter
  7. Communication between sibling components in Vue.js 2.0
  8. Vue Router return 404 when revisit to the url
  9. How to import and use image in a Vue single file component?
  10. How to implement debounce in Vue2?
  11. Vuex – Do not mutate vuex store state outside mutation handlers
  12. How to listen for ‘props’ changes
  13. Passing props dynamically to dynamic component in VueJS
  14. Accessing Vuex state when defining Vue-Router routes
  15. Vuejs typescript this.$refs..value does not exist
  16. Which command do I use to generate the build of a Vue app?
  17. VueJS access child component’s data from parent
  18. vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard
  19. Vue – how to pass down slots inside wrapper component?
  20. Apply global variable to Vuejs
  21. Mocking methods on a Vue instance during TDD
  22. Vue template or render function not defined yet I am using neither?
  23. Global data with VueJs 2
  24. What is nextTick and what does it do in Vue.js?
  25. Vue.js – update router view
  26. Detect Back Button in Navigation Guards of Vue-Router
  27. When should I use Vuex?
  28. Pass an object as param to router.push ([email protected])
  29. How to use microfrontends with Vue/Nuxt?
  30. How to pass an object as props with vue router?

Leave a Comment