Add Jquery To My Page

How can i add jQuery to my page in Yii 2.0?

In Yii 1.x you could just use:


I already tried to override the View class with my own and tried to register jQuery there, but it doesn’t shows up in my html page:

namespace frontend\components;


 * This is the base view object, it extends the yii\web\View so you can add custom view stuff here.


class BaseView extends \yii\web\View {

    public function init()






Inside view:

<? \yii\web\JqueryAsset::register($this); ?>

Also, notice that you don’t forget <?php $this->beginPage(); ?>,<?php $this->head(); ?> and so on in your layout.

It also works when i put it in my BaseView class :wink: (it’s the same class as you should put it in the view). The problem was, i forgot to place the endPage() method in my layout file, now it’s working fine, thanks!

By default the /css/site.css and bootstrap.css are also included, can i disable this?

And how can i let jquery include in the head? instead on the end of the page?

You can do whatever you like by configuring asset manager.

For example:

'assetManager' => [

    'bundles' => [

        'yii\web\JqueryAsset' => [

            'sourcePath' => null,

            'js' => ['//']


        'yii\bootstrap\BootstrapPluginAsset' => [

            'sourcePath' => null,

            'js' => ['/js/bootstrap.js'] // NB: file was patched


        'yii\bootstrap\BootstrapAsset' => [

            'sourcePath' => null,

            'css' => ['/css/bootstrap.min.css']




This is not recommended, since it can slow down initial page load.

But still you have two options:

  1. set script position to POS_HEAD


  1. use asset dependencies for your js files, like this:

	public $depends = array(



(I suppose that the only reason why you want to include jquery in the head is atisfying some of your script dependencies)

Actually, as I see there is documentation ready for this.

Thanks again! I will let jQuery at the end of my page then. But i still don’t understand how to disable the site.css and bootstrap.css files. If i set the bootstrap part to null in my configuration (assetManager), they still show up.

AFAIR site.css is included in AppAsset, so you can just remove it.

Speaking about bootstrap.css, I haven’t tried it yet, maybe something like setting it to null or false will do the job.

Btw think twice before you disable it. If it’s included then I suppose it is required by some of your components.

That was the file i was looking for :), you can also remove the BootstrapAsset in there, so it’s solved now. Thanks for the quick responses.

Wow, I totally forgot about this. Ok.