Using Vue.js in a standalone project

Question

I am trying to learn Vue.js for work, and I seem to have the syntax down, but I have a question about creating an overall project.

So far, to create a project, I have had to use npm to create the project (or start the ui, and do it from there).

But I am wondering how I can include Vue without always running serve via command prompt to render it in my browser. For example, if I am creating a website front end with html, css, and some javascript, can I somehow import Vue to that and use it?

I assume with something like this:

<script src="https://unpkg.com/[email protected]"></script>

I should add: If someone could point me to a direction where I can look at a template that would incorporate html, css, and javascript/vue in one file. That would be great! — burgoyne
– burgoyne, Commented Jan 14, 2019 at 20:58
Are you looking for single file components? vuejs.org/v2/guide/single-file-components.html — Terry
– Terry, Commented Jan 14, 2019 at 20:59
Well that shows Vue examples in a .vue file. I was hoping to just have my .css files, my .html files, and .js files (or a compilation of all three into one file) and incorporate Vue into that. Instead of creating a Vue project. — burgoyne
– burgoyne, Commented Jan 14, 2019 at 21:02
Oh, that's not how I understood your original comment. Then just load VueJS from any CDN, that should work fine, e.g. from cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js — Terry
– Terry, Commented Jan 14, 2019 at 21:03
Just deleted my last comment. Thanks. So I can load that from cdn, and put it into my html file, and then use Vue code? — burgoyne
– burgoyne, Commented Jan 14, 2019 at 21:05

tony19 · Accepted Answer · 2022-07-15 02:42:22Z

6

I think this link will help you.

https://v2.vuejs.org/v2/guide/#Getting-Started

A little exemple.

Html file.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Pure js file.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

But if you have a .vue files like this:

<template>
  <!- ... ->
</template>
<script>
  // ...
</script>

You don't have the choice, you need to run the script npm run serve or yarn serve for compiling the .vue file into a valid javascript file.

edited Jul 15, 2022 at 2:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 14, 2019 at 21:20

William Lapointe

764 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Vue.js in a standalone project

1 Answer 1

A little exemple.

Html file.

Pure js file.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

A little exemple.

Html file.

Pure js file.

Comments

Your Answer

Sign up or log in

Post as a guest

Related