How to Run Vue Component Mounted Again

How to set up and use Vue in your Laravel 8 app

In older versions of Laravel, Vue was fix automatically with every new installation. However, in newer versions y'all have to prepare it up yourself.

Luckily, the laravel/ui package provides an easy way to set upwards Vue in your Laravel application.

Follow these steps to get Vue fix in your Laravel app.

1. Create a new Laravel application

If you haven't already, create a new app using Laravel'due south installer and navigate into that directory.

          $ laravel new my-app
$ cd my-app        

2. Install the laravel/ui composer package

          $ composer crave laravel/ui        

3. Gear up the Vue scaffolding

The laravel/ui package has some helpful Artisan commands which will automatically scaffold out everything y'all demand to get started with Vue.

          $ php artisan ui vue        

You'll notice that it makes a few changes in your app. There will be more details about those changes downward beneath.

4. Compile the files

Finally, you'll demand to install the newly added dependencies and compile them.

          $ npm install && npm run dev        

Note: if you're running this for the first time, Mix might demand to install additional dependencies which information technology'll pull in automatically. If yous see an error message, but run npm run dev again.

5. Include /js/app.js in your view

Your app.js file volition be compiled and saved to public/js/app.js. Since we're using Laravel Mix to compile it, we can use the mix() helper method to generate the correct path for u.s.a.. Using the mix() helper is recommended so that the proper file name is used if yous're using versioning.

          <script src="{{ mix('/js/app.js') }}"></script>        

6. Add the vue root element to your HTML

Make sure to also have a root element with an id of app to your HTML scaffolding. Otherwise, Vue won't know where to mount the components.

          <div id="app">
            <example-component></case-component>
</div>        

Registering Unmarried File Vue Components

The laravel/ui package will create a new directory in resources/js/components. This is where you can add new Vue components. You lot'll notice that the laravel/ui package added an ExampleComponent.vue file in there already.

Once you create your Vue component file, you'll need to annals information technology with Vue. In Laravel, you can do that in your principal app.js file (resources/js/app.js).

Yous'll notice the ExampleComponent is already registered.

          Vue.component('example-component', crave('./components/ExampleComponent.vue').default);        

Feel free to create sub directories in your resource/js/components/ directory to organize your files. Only make sure the path in your require() method matches your directory structure.

          Vue.component('admin-login-component', crave('./components/Admin/AdminLoginComponent.vue').default);        

File Changes

Yous'll notice that the laravel/ui package volition make a number of changes to your files.

package.json

All the necessary packages were added as dependencies.

• vue
• vue-template-compiler

Nearly notably, the vue packages were added as dependencies. We'll demand these in social club to use Vue and compile single file components.

• bootstrap
• jquery
• popper.js

Bootstrap and information technology's dependencies (jQuery, popper.js) were added as dependencies into your project. These additional dependencies were installed because laravel/ui'south optional authentication scaffolding views employ Bootstrap.

• sass
• sass-loader
• resolve-url-loader

Bootstrap's CSS is written in SASS. These SASS packages are pulled in so that nosotros can properly compile our SASS into CSS.

resources/js/app.js

Here we initialize Vue and include our components and then that they're available in our compiled JS.

resources/js/bootstrap.js
This file was modified to load Bootstrap and jQuery.

webpack.mix.js
The vue() method automatically adds some necessary Babel configuration that are needed to compile unmarried file components.

Laravel Mix now as well compiles SASS instead of CSS.

Manually Setting up Vue without Using laravel/ui

Y'all don't need to use the laravel/ui package in social club to add support for Vue. In fact, you may actually choose not to if you don't need the additional dependencies (similar Bootstrap). Calculation Vue support is easy enough.

1. Install npm dependencies

          $ npm install --salve-dev vue vue-template-compiler        

2. Create a component

Create a new directory named components in the resources/js/ directory.

Create a new file ExampleComponent.vue and fill it with the following code.

          <template>
            <div>Hello, Instance Component!</div>
</template>
<script>
export default {
              mounted() {
              console.log('Example component mounted.')
              }
}
</script>
                  

two. Initialize Vue

We need to require the Vue bundle in our awarding, register our components and and then initialize our Vue app.

Add together the following to your resources/js/app.js file.

                      // Crave Vue
            window.Vue = require('vue').default;
              // Annals Vue Components
              Vue.component('example-component', crave('./components/ExampleComponent.vue').default);
            
              // Initialize Vue
              const app = new Vue({
              el: '#app',
});
                  

3. Add together Vue support to Laravel Mix

Add the vue() method to your Laravel mix chain.

Update the post-obit in your webpack.mix.js file.

          mix.js('resources/js/app.js', 'public/js')
            .vue()            // <- Add this            
            .postCss('resource/css/app.css', 'public/css', [
            //
            ]);        

5. Compile your assets

          $ npm run dev        

Notation: if this is a new projection, make sure that yous run npm install before running this command.

6. Update your HTML

Make sure to include your compiled javascript file in your HTML views.

          <script src="{{ mix('/js/app.js') }}"></script>        

Also, make sure you accept a root element with an id of app.

          <div id="app">
            <example-component></example-component>
</div>        

Notice that this #appid corresponds to the id we passed to Vue when we initialized it in pace #ii. You tin can, of grade, proper name that id whatever you would similar. Just make sure it matches el configuration when initializing your Vue app.

At present with any luck. You should exist able to load your app in the browser and see the rendered Vue component.

Level Upwards Coding

Thanks for being a role of our community! Level Upwardly is transforming tech recruiting. Find your perfect job at the best companies.

smithevernshould40.blogspot.com

Source: https://levelup.gitconnected.com/how-to-set-up-and-use-vue-in-your-laravel-8-app-2dd0f174e1f8

Share this post