Vuejs with CDN and HTML

How to run VueJS 3 using CDN and HTML – Laravel

by

VueJS is a JavaScript framework that allows building single-page websites and web applications in a simple way. It has a component-based structure where we can split the whole thing and reuse them anywhere in the application. It is not compulsory to add VueJS in Laravel projects. However, when added, it has various benefits and is a perfect choice for single-page application development. We can install and run Vuejs in two ways, one is using build tools like Vite for VueJS installs and the other way is through CDN.

Firstly, set up your new Laravel project using the command below.

composer create-project laravel/laravel guide-to-laravel-and-vue

You may then navigate to your Laravel application’s root directory thorough CLI and type in the command below to install vuejs.

npm install --save-dev vue

You can also install using php artisan command, as shown below.

$ php artisan ui vue

Run VueJS 3 using CDN

You can copy the following code below into your HTML file and run/open it directly in the browser.

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }).mount('#app')
</script>

It will do the following to run your VueJS application in Laravel

  • it creates a unique ID for your application. You may use it in the JavaScript mount function.
  • the {{ message }} variable is used to connect HTML and JavaScript.
  • You can store all your variable in the data() function shown above.

The code above will give you an output of: ‘Hello World!’